Cara Membuat Animasi Loading Page Dengan HTML CSS
Animasi Loading sering ditemui dikala terjadi reload atau request suatu halaman. Animasi loading tentu akan dibangun semenarik dan secantik mungkin agar pengguna atau user tak bosan menunggu. Pada kasus kali ini kita akan belajar membangun animasi loading page sederhana namun cantik, heeee. Baiklah seketika saja kita mulai membuatnya.
Langkah Pertama-tama
Rekan-rekan bikin struktur HTML yang berisi seperti code dibawah ini:
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<title>Membangun 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
Rekan-rekan 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 jikalau rekan-rekan perhatikan di style css @keyframe rotate jadi tampilan animasi loading page berputar-putar seperti tampilan gambar berikut ini:
Demikian pembahasan di artikel ini Cara Membangun Animasi Loading Page Dengan HTML CSS, semoga bermanfaat dan samapi jumpa dengan pembhasan lainnya.
terima kasih
Sumber https://kursuswebsite.org