Bila kalian pengguna Instagram niscaya pernah melihat Progress kafe yang yang berwarna warni yang berada pada posisi atas setiap kita mengunjungi halaman tersebut. Dan pada kesempatan kali ini aku ingin mengembangkan Cara Membuat Progress Bar Pelangi Ala Instagram. Sebenar nya cara ini sudah pernah di publikasikan oleh sahabat blogger yang berjulukan Igniel. Dan Artikel yang di buat oleh ia pun dengan kata kunci Cara Membuat Progress Bar Pelangi mungkin berada pada posisi Page One untuk kini ini. Dan tujuan aku menciptakan artikel ini semata hanya ingin mengembangkan buat kalian dan eksklusif aku sendiri untuk menambah wawasan dalam dunia blogging.
Cara Membuat Progress Bar Pelangi Ala Instagram yang akan aku bagikan kali ini cara nya mudah, kalian cukup ikuti langkah - langkah nya sebagai berikut.
Cara Membuat Progress Bar Pelangi Ala Instagram
Silahkan kalian copy instruksi di bawah ini kemudian letakan instruksi tersebut di atas instruksi </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 aku tandai pada instruksi height: 4px kalian dapat ganti ukuran untuk seberapa tinggi progress yang kalian inginkan. Semakin besar ukuran yang kalian tambahkan semakin besar pula ukuran progress kafe nya.
Dan untuk instruksi warna yang aku tandai warnai kuning, kalian dapat ganti dengan instruksi warna yang sesuai dengan warna template kalian.
Langkah Terakhir
Silahkan kalian copy instruksi di bawah ini kemudian letakan instruksi tersebut di atas instruksi </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 teladan atau hasil nya menyerupai apa kalian dapat lihat Demo nya di bawah ini.
Saya kira tutorial kali ini sudah di final dari langkah - langkah Cara Membuat Progress Bar Pelangi Ala Instagram yang telah aku berikan. Semoga artikel kali ini dapat bermanfaat buat sobat blogger. Selamat mencoba!
