Membuat Loader Windows 8 dengan CSS

Jumat, 21 Oktober 2016 10:20 Moldy Ramadhan - Tips & Trik

Kalian tentu sudah mengenal dengan bahasa pemrograman HTML dan CSS, apa lagi bagi Anda yang sudah pernah membuat website tentunya sudah mahir menguasai bahasa pemrograman tersebut. 
 
Image: wallpaperswide.com
 
Dalam pembahasan kali ini saya akan sedikit membahas tentang bagaimana cara membuat animasi sebuah loading page windows 8 menggunakan bahasa pemrograman HTML dan CSS tanpa harus melibatkan javascript, jqueri dan lain lain.
 
Tampilan Loader Windows 8
 
Sebelum membuat sebuah animasi loading page maka hal pertama Anda harus menyiapkan alat tempur terlebih dahulu supaya dalam membuat animasi loading page windows 8 ini bisa lebih mudah. Alat tempur yang harus Anda siapkan bisa Notepad++, Sublime Text, atau css editor semacamnya, terserah Anda mau pilih yang mana.

Untuk bisa mendapat kodenya Anda bisa memulai dengan mengakses Website CSS Loader. Pada website ini anda akan dibebaskan untuk memilih beberapa Animation Loader yang Anda butuhkan. Ketika sudah masuk halaman website, maka Anda akan melihat beberapa menu. Berikut penjelasan dari menu tersebut:

  • Select your loader: Merupakan tempat pemilihan mode dari loader yang ada. Terdapat mode grafik dan mode teks, secara dasar mode yang ditampilkan adalah mode grafik. Untuk mengakses mode text Anda dapat mengakses pada bagian kanan menu.
  • First color: Merupakan warna dasar dari loader yang telah Anda pilih, dan secara otomatis warna akan dirubah menjadi kode warna hexa sehingga Anda tidak perlu melakukan pengubahan secara manual.
  • Second color: Merupakan warna kedua bagi loader yang menggunakan 2 warna
  • Width & height: Ukuran lebar dan luas dari loader yang anda pilih.
  • Speed: Mengatur kecepatan dari kecepatan loader yang sudah anda pilih.
  • Reverse animation: Mengubah putaran animasi yang sebelumnya searah jarum jam, menjadi berlawanan dengan arah jarum jam.
  • get code: Tentu saja mendapatkan code berbentuk css yang bisa anda gunakan pada website anda.

Sedangkan untuk percobaan background, terdapat 4 kotak contoh background pada kotak sebelah kanan. Terdapat pilihan warna hitam, putih, transparan dan bentuk RGB.
Ketika langkah tersebut telah selesai, maka akan muncul pop up kode hasil dari customisasi. Untuk menggunakannya Anda tinggal melakukan copy paste pada kode tersebut. Untuk menggunakannya Anda bisa mulai dengan memisahkan kode tersebut menjadi file HTML dan CSS. Sebagai contoh berikut kode untuk membuat loading page Windows 8:

HTML Code:

<div class="windows8">
	<div class="wBall" id="wBall_1">
		<div class="wInnerBall"></div>
	</div>
	<div class="wBall" id="wBall_2">
		<div class="wInnerBall"></div>
	</div>
	<div class="wBall" id="wBall_3">
		<div class="wInnerBall"></div>
	</div>
	<div class="wBall" id="wBall_4">
		<div class="wInnerBall"></div>
	</div>
	<div class="wBall" id="wBall_5">
		<div class="wInnerBall"></div>
	</div>
</div>

CSS Code:

.windows8 {
	position: relative;
	width: 78px;
	height:78px;
	margin:auto;
}

.windows8 .wBall {
	position: absolute;
	width: 74px;
	height: 74px;
	opacity: 0;
	transform: rotate(225deg);
		-o-transform: rotate(225deg);
		-ms-transform: rotate(225deg);
		-webkit-transform: rotate(225deg);
		-moz-transform: rotate(225deg);
	animation: orbit 6.96s infinite;
		-o-animation: orbit 6.96s infinite;
		-ms-animation: orbit 6.96s infinite;
		-webkit-animation: orbit 6.96s infinite;
		-moz-animation: orbit 6.96s infinite;
}

.windows8 .wBall .wInnerBall{
	position: absolute;
	width: 10px;
	height: 10px;
	background: rgb(0,0,0);
	left:0px;
	top:0px;
	border-radius: 10px;
}

.windows8 #wBall_1 {
	animation-delay: 1.52s;
		-o-animation-delay: 1.52s;
		-ms-animation-delay: 1.52s;
		-webkit-animation-delay: 1.52s;
		-moz-animation-delay: 1.52s;
}

.windows8 #wBall_2 {
	animation-delay: 0.3s;
		-o-animation-delay: 0.3s;
		-ms-animation-delay: 0.3s;
		-webkit-animation-delay: 0.3s;
		-moz-animation-delay: 0.3s;
}

.windows8 #wBall_3 {
	animation-delay: 0.61s;
		-o-animation-delay: 0.61s;
		-ms-animation-delay: 0.61s;
		-webkit-animation-delay: 0.61s;
		-moz-animation-delay: 0.61s;
}

.windows8 #wBall_4 {
	animation-delay: 0.91s;
		-o-animation-delay: 0.91s;
		-ms-animation-delay: 0.91s;
		-webkit-animation-delay: 0.91s;
		-moz-animation-delay: 0.91s;
}

.windows8 #wBall_5 {
	animation-delay: 1.22s;
		-o-animation-delay: 1.22s;
		-ms-animation-delay: 1.22s;
		-webkit-animation-delay: 1.22s;
		-moz-animation-delay: 1.22s;
}



@keyframes orbit {
	0% {
		opacity: 1;
		z-index:99;
		transform: rotate(180deg);
		animation-timing-function: ease-out;
	}

	7% {
		opacity: 1;
		transform: rotate(300deg);
		animation-timing-function: linear;
		origin:0%;
	}

	30% {
		opacity: 1;
		transform:rotate(410deg);
		animation-timing-function: ease-in-out;
		origin:7%;
	}

	39% {
		opacity: 1;
		transform: rotate(645deg);
		animation-timing-function: linear;
		origin:30%;
	}

	70% {
		opacity: 1;
		transform: rotate(770deg);
		animation-timing-function: ease-out;
		origin:39%;
	}

	75% {
		opacity: 1;
		transform: rotate(900deg);
		animation-timing-function: ease-out;
		origin:70%;
	}

	76% {
	opacity: 0;
		transform:rotate(900deg);
	}

	100% {
	opacity: 0;
		transform: rotate(900deg);
	}
}

@-o-keyframes orbit {
	0% {
		opacity: 1;
		z-index:99;
		-o-transform: rotate(180deg);
		-o-animation-timing-function: ease-out;
	}

	7% {
		opacity: 1;
		-o-transform: rotate(300deg);
		-o-animation-timing-function: linear;
		-o-origin:0%;
	}

	30% {
		opacity: 1;
		-o-transform:rotate(410deg);
		-o-animation-timing-function: ease-in-out;
		-o-origin:7%;
	}

	39% {
		opacity: 1;
		-o-transform: rotate(645deg);
		-o-animation-timing-function: linear;
		-o-origin:30%;
	}

	70% {
		opacity: 1;
		-o-transform: rotate(770deg);
		-o-animation-timing-function: ease-out;
		-o-origin:39%;
	}

	75% {
		opacity: 1;
		-o-transform: rotate(900deg);
		-o-animation-timing-function: ease-out;
		-o-origin:70%;
	}

	76% {
	opacity: 0;
		-o-transform:rotate(900deg);
	}

	100% {
	opacity: 0;
		-o-transform: rotate(900deg);
	}
}

@-ms-keyframes orbit {
	0% {
		opacity: 1;
		z-index:99;
		-ms-transform: rotate(180deg);
		-ms-animation-timing-function: ease-out;
	}

	7% {
		opacity: 1;
		-ms-transform: rotate(300deg);
		-ms-animation-timing-function: linear;
		-ms-origin:0%;
	}

	30% {
		opacity: 1;
		-ms-transform:rotate(410deg);
		-ms-animation-timing-function: ease-in-out;
		-ms-origin:7%;
	}

	39% {
		opacity: 1;
		-ms-transform: rotate(645deg);
		-ms-animation-timing-function: linear;
		-ms-origin:30%;
	}

	70% {
		opacity: 1;
		-ms-transform: rotate(770deg);
		-ms-animation-timing-function: ease-out;
		-ms-origin:39%;
	}

	75% {
		opacity: 1;
		-ms-transform: rotate(900deg);
		-ms-animation-timing-function: ease-out;
		-ms-origin:70%;
	}

	76% {
	opacity: 0;
		-ms-transform:rotate(900deg);
	}

	100% {
	opacity: 0;
		-ms-transform: rotate(900deg);
	}
}

@-webkit-keyframes orbit {
	0% {
		opacity: 1;
		z-index:99;
		-webkit-transform: rotate(180deg);
		-webkit-animation-timing-function: ease-out;
	}

	7% {
		opacity: 1;
		-webkit-transform: rotate(300deg);
		-webkit-animation-timing-function: linear;
		-webkit-origin:0%;
	}

	30% {
		opacity: 1;
		-webkit-transform:rotate(410deg);
		-webkit-animation-timing-function: ease-in-out;
		-webkit-origin:7%;
	}

	39% {
		opacity: 1;
		-webkit-transform: rotate(645deg);
		-webkit-animation-timing-function: linear;
		-webkit-origin:30%;
	}

	70% {
		opacity: 1;
		-webkit-transform: rotate(770deg);
		-webkit-animation-timing-function: ease-out;
		-webkit-origin:39%;
	}

	75% {
		opacity: 1;
		-webkit-transform: rotate(900deg);
		-webkit-animation-timing-function: ease-out;
		-webkit-origin:70%;
	}

	76% {
	opacity: 0;
		-webkit-transform:rotate(900deg);
	}

	100% {
	opacity: 0;
		-webkit-transform: rotate(900deg);
	}
}

@-moz-keyframes orbit {
	0% {
		opacity: 1;
		z-index:99;
		-moz-transform: rotate(180deg);
		-moz-animation-timing-function: ease-out;
	}

	7% {
		opacity: 1;
		-moz-transform: rotate(300deg);
		-moz-animation-timing-function: linear;
		-moz-origin:0%;
	}

	30% {
		opacity: 1;
		-moz-transform:rotate(410deg);
		-moz-animation-timing-function: ease-in-out;
		-moz-origin:7%;
	}

	39% {
		opacity: 1;
		-moz-transform: rotate(645deg);
		-moz-animation-timing-function: linear;
		-moz-origin:30%;
	}

	70% {
		opacity: 1;
		-moz-transform: rotate(770deg);
		-moz-animation-timing-function: ease-out;
		-moz-origin:39%;
	}

	75% {
		opacity: 1;
		-moz-transform: rotate(900deg);
		-moz-animation-timing-function: ease-out;
		-moz-origin:70%;
	}

	76% {
	opacity: 0;
		-moz-transform:rotate(900deg);
	}

	100% {
	opacity: 0;
		-moz-transform: rotate(900deg);
	}
}

Anda pun dapat melakukan beberapa perubahan manual jika Anda menginginkannya dan tidak ingin melakukan generate kembali.

  • Untuk merubah warna anda dapat melakukan pengubahan pada class .windows8 .wBall .wInnerBall terdapat kode background Anda bisa mengubah sesuai dengan kemauan Anda.
  • Sedangkan, jika ingin mengubah ukuran dari loader anda bisa memulai dengan mengubah width dan height dari class .windows8 .wBall sesuai dengan kebutuhan anda.

Hasilnya website anda pun akan semakin tampak professional dan berkelas ketika menggunakan loading page ini. Mungkin loading page ini bukan satu satunya yang ada, semoga tutorial ini bermanfaat. Terimakasih!


Bagikan Artikel

Baca Juga
Belum ada komentar! Jadilah yang pertama berkomentar di sini.

Tambah Komentar

Terbaru

Populer

Komentar