Beranda Blog & Website Membuat Loader Seperti Windows 8 dengan CSS

Membuat Loader Seperti Windows 8 dengan CSS

647
0
BERBAGI
Bantu support blog asdar.id agar bisa lebih berkembang lagi untuk membagikan ilmu pengetahuan secara gratis. Caranya yaitu dengan menyisihkan sedikit rejeki anda melalui laman donasi, klik DISINI. Semoga apa yang anda berikan bisa menjadi penolong di Akhirat kelak, Amin Ya Rabbal 'Alamin :-)
loader windows 8

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.

Pada 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 sebagainya.

Sebelum membuat sebuah animasi loading page maka hal pertama yang perlu dilakukan adalah harus menyiapkan alat tempur terlebih dahulu supaya dalam membuat animasi loading page windows 8 ini bisa lebih mudah. Alat tempur yang dimaksud disini adalah kode editor bisa Notepad++, Sublime Text, atau CSS editor semacamnya, terserah anda mau gunakan yang mana.

contoh loader windows 8

Untuk bisa mendapat kodenya anda bisa memulainya 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. Ada pilihan warna hitam, putih, transparan dan bentuk RGB.

loading...

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:

Membuat Loader Seperti Windows 8 dengan CSS

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, tetapi bisa berguna untuk website anda.

Sekian postingan kali ini, semoga tutorial ini bermanfaat. Jika artikel ini bermanfaat, jangan lupa bagikan ke yang lain. Sekian dan terimakasih.

TINGGALKAN KOMENTAR

Silakan masukkan komentar anda!
Silakan masukkan nama anda disini