Cara Membuat Progress Bar Pelangi (Gradasi Warna) Di Blog

Kalau kamu buka Instagram via website, pasti nemu garis berwarna-warni yang selalu muncul di atas dan akan hilang ketika halamannya selesai termuat sepenuhnya. Itulah yang disebut dengan progress bar gradient color Instagram.

Saya kepikiran bikin artikel ini karena kemarin baru aja bahas soal background gradient color animation CSS. Biar nyambung aja gitu, karena sama-sama membuat efek pelangi dan gradasi warna.

Langsung aja ke tutorialnya yang super sederhana dan dijamin nggak bikin berat blog.

1. CSS

Tambahkan kode CSS berikut ke pengaturan HTML blog masing-masing. Catatan untuk pengguna WordPress, silakan cari lokasi file CSSnya dulu, baru edit dan tambahkan kode ini.

#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%;}
}

Kamu bisa mengubah beberapa hal:

1. Kode yang diberi highlight biru height adalah tinggi dari progress bar. Semakin besar angkanya, semakin besar pula ukuran barnya.
2. Kode yang diberi highlight merah adalah pengaturan warna dan animasi. Penjelasan lengkapnya silakan baca di artikel sebelumnya yang linknya udah disebut di awal artikel.

2. HTML dan Javascript

Gunanya untuk memanggil dan memunculkan progress loading bar pelangi. Simpan kode berikut SEBELUM / DIATAS </body>.

<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>

Lihat Hasilnya

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.