Hallo tukang koding!! Lagi cari referensi buat animasi loading yang keren? Saya punya nih. Yuk cek bersama dibawah ini. Script loading ini dibuat dari html dan css saja. Kamu bisa kreasikan sendiri sesuai keinginan kamu.
Alat tempur yang dibutuhkan cuma notepad atau teks editor dan browser saja.
Pertama-tama kamu buat dulu folder baru dengan nama terserah kamu. Buka folder tersebut dan buat file baru dengan nama index.html, kemudian masukkan kode dibawah ini.
<html><head>
<title>3d Loader</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="container">
<span>L</span>
<span>O</span>
<span>A</span>
<span>D</span>
<span>I</span>
<span>N</span>
<span>G</span>
</div>
</body></html>Lalu save.
Kemudian buat lagi file baru dengan nama index.css dan masukkan kode css berikut ini :
body {
margin:0;
padding:0;
background:#fff;
}
.container{
position:absolute ;
top:50%;
left:50%;
transform:translate(-50%,-50%);
height:80px;
width:310px;
background:#fff;
display:flex;
justify-content:center ;
}
span{
position:relative ;
font-size:60px;
font-weight:1000;
line-height:80px;
color:#fff;
background:#fff;
margin:3px;
text-shadow:1px 1px 1px #777,
1px 2px 1px #777,
1px 3px 1px #777,
1px 4px 1px #777,
1px 5px 1px #777,
1px 6px 1px #777,
1px 7px 1px #777,
1px 8px 1px #777,
1px 9px 1px #777,
1px 10px 1px #777,
0px 22px 10px #aaa,
0px 25px 14px #bbb;
animation:load 3s infinite;
}
@keyframes load{
0%,100%{}
50%{text-shadow:0px 0px 0px ;}
}
span:nth-child(1){
animation-delay:0s;
}
span:nth-child(2){
animation-delay:0.285s;
}
span:nth-child(3){
animation-delay:0.57s;
}
span:nth-child(4){
animation-delay:0.855s;
}
span:nth-child(5){
animation-delay:1.14s;
}
span:nth-child(6){
animation-delay:1.425s;
}
span:nth-child(7){
animation-delay:1.71s;
}
Kemudian save.
Jalankan file tersebut dengan mendrag file index.html ke browser kesayangan kamu atau klik kanan open in browser. Hasilnya akan tampil seperti di bawah ini.
Warna, ukuran dan jenis font bisa kamu modifikasi sesuai keinginan kamu dengan mengedit file index.css nya.
Disini tidak dijelaskan tentang fungsi dari masing-masing kode diatas karena saya anggap kalian sudah mengerti dengan html dan css ya. Terima kasih sudah berkunjung di artikel ini yang berjudul Loading Animasi Dengan Html dan Css.
