Skip to content Skip to sidebar Skip to footer

Widget HTML #1

Home / Blogging

Cara Membuat Progress Bar Atau Animasi Loading Pelangi Di Blog

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

Untuk membuat progress bar caranya cukup sederhana sobat tingal Copy dan Paste.
Melalui Edit HTML
  • 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[
Melalui Edit Tata Letak
  • 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%;}
}

1. Kode height adalah tinggi dari progress bar. Semakin besar angkanya, semakin besar pula ukuran barnya.

2. Kode background adalah pengaturan kode warna dan animasi. 

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>

Harap diingat. Bagi blog yang ukuran halamannya sangat ringan, mungkin progress bar pelangi ala Instagram ini nggak bakal keliatan karena waktu loadingnya yang super cepat. Dia sebenarnya muncul tapi cuma sepersekian detik aja, jadi agak susah untuk dinotice.

Referensi : https://www.igniel.com/2018/05/progress-bar-rainbow-gradient-color.html