Cara Membuat Animasi Loading Page Dengan HTML CSS

Animasi Loading sering ditemui saat terjadi reload atau request suatu halaman. Animasi loading tentu akan dibuat semenarik dan secantik mungkin agar pengguna atau user tidak bosan menunggu. Dalam kasus kali ini kita akan belajar membuat animasi loading page sederhana namun cantik, heeee. Baiklah langsung saja kita mulai membuatnya.

Langkah Pertama

Sahabat buat struktur HTML yang berisi seperti code dibawah ini:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Membuat Loading Page Dengan HTML CSS</title>
	<link rel="stylesheet" href="style.css">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
	<div id="rounded">
		<div class="loading">
			<div class="loading">
				<div class="loading">
					<div class="loading">
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

Langkah kedua

Sahabat menambahkan style code CSS berikut ini:

body{background-color: #efefef !important}

#rounded{
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	width: 120px;
	height: 120px;
}

.loading{
	padding: 5px;
	width: calc(100% - 0px);
	height: calc(100% - 0px);
	border:3px solid #eaeaea;
	border-radius: 50%;
	border-top: 3px solid #09a804;
	border-bottom: 3px solid #e80606;
	animation: rotate 5s linear infinite;
}

@keyframes rotate 
{
	100% {transform: rotate(360deg)}
}

Animasi yang nanti tampil secara berputar jika sahabat perhatikan pada style css @keyframe rotate jadi tampilan animasi loading page berputar-putar seperti tampilan gambar berikut ini:

Demikian pembahasan pada artikel ini Cara Membuat Animasi Loading Page Dengan HTML CSS, semoga bermanfaat dan samapi jumpa dengan pembhasan lainnya.

terima kasih

Cara Membuat Animasi Loading Page Dengan HTML CSS

Kategori