Membuat Progress Bar Pelangi Ala Instagram Di Blog

Diposting pada

Membuat Progress Bar Pelangi Ala Instagram Di Blog

Membuat Progress Bar Pelangi Ala Instagram – Bila kalian pengguna Instagram pasti pernah melihat Progress bar 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. Dan bagi kalian yang ingin mencoba untuk membuat progress bar pelangi ala instagram, silahkan 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%;}
}

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.

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

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *