Skip to main content
Website Mini

follow us

Membuat Progress Bar Warna Warni Di Blog

Membuat Progress Bar Warna Warni Di Blog dengan gradasi warna.

Membuat Progress Bar Warna Warni Di Blog - Selamat malam sahabat blog Website Mini. Pada malam ini Saya akan coba posting seperti pada judul diatas, yaitu membuat progres bar warna warni di blog.

Progress Bar adalah ketika blog sobat loading maka akan muncul warna yang bergerak diatas header blog sobat. Progress Bar seperti loading animasi. Jika sobat sering buka instagram via website atau Google Adsense, pasti sobat akan melihat garis yang berjalan di atas, dan akan hilang setelah halaman sudah dimuat sepenuhnya.

Sobat juga bisa membuat progress bar seperti itu dengan warna gradasi atau gradient. Nah, jika sobat ingin membuat progress bar pada blog sobat, silahkan ikuti langkahnya berikut ini.

Langkah pertama.

Simpan CSS berikut di dalam template sobat.

#ProgressBar {
  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: ProgressBar 5s ease infinite;
  -moz-animation: ProgressBar 5s ease infinite;
  -webkit-animation: ProgressBar 5s ease infinite;
  -o-animation: ProgressBar 5s ease infinite;
}
@keyframes ProgressBar {
  0% {background-position: 0% 100%;}
  50% {background-position: 100% 200%;}
  100% {background-position: 0% 100%;}
}
@-moz-keyframes ProgressBar {
  0% {background-position: 0% 100%;}
  50% {background-position: 100% 200%;}
  100% {background-position: 0% 100%;}
}

Langkah kedua.

Simpan HTML dan Javascript berikut, di atas kode </body>

<div id='ProgressBar'/>
<script> //<![CDATA[
  function Bar(){document.getElementById('ProgressBar').style.display='none';}
  window.addEventListener ? window.addEventListener('load',Bar,false) : window.attachEvent && window.attachEvent('onload',Bar);
//]]></script>

Note:

Jika blog Anda mempunyai loading yang sangat cepat, maka efek progress bar tidak akan terlihat. Meskipun terlihat, mungkin hanya beberapa detik saja.

Nah, itulah postingan kali ini tentang Membuat Progress Bar Warna Warni Di Blog. Selamat mencoba dan semoga bermanfaat.

You Might Also Like:

Buka Komentar