Membuat Loading Animation KEREN dan SIMPLE!! 100% HTML dan CSS
Hai, sobat komputer kali ini saya akan berbagi tutorial bagiamana cara membuata loading animation yang keren dan sederhana, dengan hanya menggunakan HTML dan CSS. Apa sih tujuan dibuatnya Loading Animation? tujuannya agar para pengunjung tidak merasa jenuh ketika mengakses website maupun blog kita saat data yang di akses belum sepenuhnya siap. Loading animation ini juga dapat menciptakan kesan website atau blog layaknya profesional.
Langsung saja seperti biasanya yang perlu kita lakukan adalah membuat 2 file utama yaitu file .html dan .css dan berikut adalah source codenya guys,
ini source code untuk file .htmlnya guys jangan sampe ketuker ya :D
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="loading">
<span>Loading...</span>
</div>
</body>
</html>
setelah selesai dengan file .html lanjut dengan membuat style.css ya nama file bebas asalkan nanti di file .html samakan dengan file cssnya, ini guys langsung comot aja source codenya.
untuk mengubah kombinasi warna biasa kalian ganti pada bagian color ya guys terus ganti sesuai warna tema/ template website kalian agar serasi :)
body{
margin: 0;
padding: 0;
background: #34495e;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: "montserrat",sans-serif;
}
.loading{
width: 200px;
height: 200px;
box-sizing: border-box;
border-radius: 50%;
border-top: 10px solid #e74c3c;
position: relative;
animation: a1 2s linear infinite;
}
.loading::before,.loading::after{
content: '';
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: -10px;
box-sizing: border-box;
border-radius: 50%;
}
.loading::before{
border-top: 10px solid #e67e22;
transform: rotate(120deg);
}
.loading::after{
border-top: 10px solid #3498db;
transform: rotate(240deg);
}
.loading span{
position: absolute;
width: 200px;
height: 200px;
color: #fff;
text-align: center;
line-height: 200px;
animation: a2 2s linear infinite;
}
@keyframes a1 {
to{
transform: rotate(360deg);
}
}
@keyframes a2 {
to{
transform: rotate(-360deg);
}
}
Oke guys itulah cara bagaimana membuat loading animation keren seperti di gambar, jangan lupa follow dan subscribe Sudutkom Channel di youtube untuk video tutorial lainnya dan sampai jumpa di artikel selanjutnya, Terima kasih.
0 Response to "Membuat Loading Animation KEREN dan SIMPLE!! 100% HTML dan CSS"
Post a Comment