Cara Membuat Progress Bar Pelangi Ala Instagram

Bila kalian pengguna Instagram pasti pernah melihat Progress bar yang yang berwarna warni yang berada pada posisi atas setiap kita mengunjungi halaman tersebut. Dan pada kesempatan kali ini saya ingin berbagi Cara Membuat Progress Bar Pelangi Ala Instagram. Sebenar nya cara ini sudah pernah di publikasikan oleh sahabat blogger yang bernama Igniel. Dan Artikel yang di buat oleh dia pun dengan kata kunci Cara Membuat Progress Bar Pelangi mungkin berada pada posisi Page One untuk sekarang ini. Dan tujuan saya membuat artikel ini semata hanya ingin berbagi buat kalian dan pribadi saya sendiri untuk menambah wawasan dalam dunia blogging.

Cara Membuat Progress Bar Pelangi Ala Instagram yang akan saya bagikan kali ini cara nya mudah, kalian cukup ikuti langkah - langkah nya sebagai berikut.

Cara Membuat Progress Bar Pelangi Ala Instagram

Silahkan kalian copy kode di bawah ini lalu letakan kode tersebut di atas kode </style> atau </b:skin> pada template kalian masing - masing.

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

Lihat yang saya tandai pada kode height: 4px kalian bisa ganti ukuran untuk seberapa tinggi progress yang kalian inginkan. Semakin besar ukuran yang kalian tambahkan semakin besar pula ukuran progress bar nya.

Dan untuk kode warna yang saya tandai warnai kuning, kalian bisa ganti dengan kode warna yang sesuai dengan warna template kalian.

Langkah Terakhir
Silahkan kalian copy kode di bawah ini lalu letakan kode tersebut di atas kode </body> pada template kalian masing - masing.

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

Untuk contoh atau hasil nya seperti apa kalian bisa lihat Demo nya di bawah ini. Bila belum berubah.

• DEMO

Saya kira tutorial kali ini sudah di akhir dari langkah - langkah Cara Membuat Progress Bar Pelangi Ala Instagram yang telah saya berikan. Semoga artikel kali ini bisa bermanfaat buat sobat blogger. Selamat mencoba!

Script By : igniel.com

Share this post