Cara Membuat Progress Bar Atau Animasi Loading Pelangi Di Blog
![]() |
Cara Membuat Progress Bar Atau Animasi Loading Pelangi Di Blog |
Progress Bar digunakan sebagai petunjuk kepada pembaca web bahwa website kita belum selesai dimuat. Seperti yang kita ketahui saat kita menonton youtube dengan web (buka lewat aplikasi), maka di bagian atas akan terlihat progress bar merah yang berjalan.
Contoh Progress Bar lain bisa kita lihat pada blogger aliat blogspot, animasi loading bisa kita lihat di bagian atas saat kita hendak berpindah dari widget/menu ke menu yang lainya.
Hal yang harus kita lakukan adalah memasan scrip CSS dan script pemanggil HTML, oke langsung saja ke bagian intinya gengs.
Cara Memasang Script CSS Progress Bar
- Salin script / code CSS
- Buka Tema
- Klik anak panah, lalu pilih Edit HTML
- Cari lokasi CSS berada, biasanya di tandai dengan awalan <b:skin>![CDATA[
- Paste script nya di bawah <b:skin>![CDATA[
- Buka Tata Letak
- Cari slot / widget Custom CSS atau Add CSS
- Paste script / code CSS nya.
*Untuk WordPress silahkan cari lokasi CSS-nya terlebih dahulu, lalu edit dan tambahkan kodenya.
Script Progress Bar Pelangi
Script ini buatan blogger cewe asal Sukabumi, Jawa Barat yaitu Mba Igniel, Igniel.com 💗
CSS
#ignielProgressBar {
position: fixed; z-index: 999999; left:0; right: 0; top: 0; bottom: 0; width: 100%;
height: 4px;
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 900% 900%;
animation: ignielProgressBar 5s ease infinite;
-moz-animation: ignielProgressBar 5s ease infinite;
-webkit-animation: ignielProgressBar 5s ease infinite;
-o-animation: ignielProgressBar 5s ease infinite;
}
@keyframes ignielProgressBar {
0% {background-position: 0% 100%;}
50% {background-position: 100% 200%;}
100% {background-position: 0% 100%;}
}
@-moz-keyframes ignielProgressBar {
0% {background-position: 0% 100%;}
50% {background-position: 100% 200%;}
100% {background-position: 0% 100%;}
}
HTML dan Javascript
<div id='ignielProgressBar'/>
<script> //<![CDATA[
function ignielBar(){document.getElementById('ignielProgressBar').style.display='none';}
window.addEventListener ? window.addEventListener('load',ignielBar,false) : window.attachEvent && window.attachEvent('onload',ignielBar);
//]]></script>
Referensi : https://www.igniel.com/2018/05/progress-bar-rainbow-gradient-color.html