Animasi dalam website merupakan pemanis penampilan yang bisa menarik perhatian pengguna atau penikmat website kita. Tampilan animasi sangat beragam dari yang sederhana sampai membuat mata kita senang melihatnya. Animasi sendiri bisa jadi mewakili kejadian yang ada saat proses dalam sebuah website maupun aplikasi.
Dalam kasus saat ini saya akan membahas tentang Cara Membuat Animasi Loader Dengan HTML CSS. Ya animasi loader bisa dibilang sebagai animasi menunggu proses apakah menu atau step selanjutnya dalam permintaan ke servernya berhasil atau gagal. Baiklah langsung saja kita buat struktur HTML seperti dibawah ini:
<div class="wrapper"> <div class="bullet"></div> <div class="bullet"></div> <div class="bullet"></div> <div class="bullet"></div> <div class="bullet"></div> <div class="bullet"></div> <div class="bullet"></div> </div>
pada class=’bullet’ disini yang nanti akan terlihat sebagai bagian dari loadernya. Selanjutnya diberikan style CSS agar terlihat bentuk serta animasi yang ditampilkan.
Silahkan ketikkan code CSS dibawah ini
*{margin:0;padding:0;}
body{background: black;}
.wrapper{top:50%;left:50%;position: absolute;}
.bullet{width: 20px;height: 20px;position: absolute;background: #539606;border-radius: 25%;animation: bulet 2.5s linear infinite;}
.bullet:nth-child(2){animation-delay: .3s;background: #a9ff47;}
.bullet:nth-child(3){animation-delay: .4s;background: #bffc79;}
.bullet:nth-child(4){animation-delay: .5s;background: #a5cf76;}
.bullet:nth-child(5){animation-delay: .6s;background: #95ba6c;}
.bullet:nth-child(6){animation-delay: .7s;background: #d5faac;}
.bullet:nth-child(7){animation-delay: .8s;background: #c5e89e;}
@keyframes bulet{
0%{
transform-origin: 250% 50%;
transform: rotate(10deg);
}
50%{
transform-origin: 250% 50%;
transform: rotate(360deg);
}
50.1%{
transform-origin: -150% 50%;
transform: rotate(300deg);
}
100%{
transform-origin: -150% 50%;
transform: rotate(10deg);
}
}
Apabila sudah langsung disimpan terlebih dahulu, kemudian jalankan pada browser untuk melihat hasil animasi loadernya.
Demikian yang bisa saya samapaikan dalam pembahasan kali ini. Semoga bermanfaat dan selamat mencoba.
terima kasih