Membuat Animasi Loading Spiner dengan CSS

Dalam artikel kali ini saya akan mengenalkan teman – teman pada animasi CSS, Cara Membuat Animasi Loading Spiner dengan CSS yang sangat performant dalam melakukan hal-hal yang semakin populer seiring peningkatan dukungan browser. Setelah sebelumnya juga saya membahas animasi CSS, pada kali ini kita akan Membuat Animasi Loading Spiner dengan CSS .

Properti animasi di CSS dapat digunakan untuk menghidupkan banyak properti CSS lainnya seperti warna, latar belakang-warna, tinggi, atau lebar. Setiap animasi perlu didefinisikan dengan @keyframes at-rule yang kemudian dipanggil dengan properti animasi.

Oke langsung saja kita buat pertama tuliskan file HTML dibawah ini:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div class="box">
		<center>
			<h1>
				Membuat animasi Loading Spiner dengan CSS
			</h1>			
		</center>
		<div id="preloader-1">
			<span></span>
			<span></span>
		</div>
	</div>
</body>
</html>

Oke kalau sudah kita kan membuat CSS untuk id preloader-1, karena id tersebuat yang akan kita buat animasi nantinya, oke langsung saja kita buat CSS animasinya di bawah ini:

<style type="text/css">
		body{
			background: #ffb83c;
		}
		h1{
			font-family: sans-serif;
			color: #fcfcfc;
			font-weight: 100;			
		}
 
		#preloader-1 {
			position: relative;
			margin:100px auto;
			width:100px;
		}
 
		#preloader-1 span {
			position: absolute;
			border: 8px solid #fff;
			border-top: 8px solid transparent;
			border-radius: 999px;
		}
 
		#preloader-1 span:nth-child(1) {
			width: 80px;
			height: 80px;
			animation: spin-1 2s infinite linear;
		}
 
		#preloader-1 span:nth-child(2) {
			top: 20px;
			left: 20px;
			width: 40px;
			height: 40px;
			animation: spin-2 1s infinite linear;
		}
 
		@keyframes spin-1 {
			0% {
				transform: rotate(360deg);
				opacity: 1;
			}
			50% {
				transform: rotate(180deg);
				opacity: 0.5;
			}
			100% {
				transform: rotate(0deg);
				opacity: 1;
			}
		}
 
		@keyframes spin-2 {
			0% {
				transform: rotate(0deg);
				opacity: 0.5;
			}
			50% {
				transform: rotate(180deg);
				opacity: 1;
			}
			100% {
				transform: rotate(360deg);
				opacity: 0.5;
			}
		}
	</style>

OKe kalau sudah silahkan teman – teman save, dan untuk melihat hasilnya silahkan jalan pada browsernya. Oke cukup mudah bukan. semoga bermanfaat.

Membuat Animasi Loading Spiner dengan CSS

Kategori