Membuat Progress Bar Warna Warni Di Blog - Selamat malam sobat blog . Pada malam ini Saya akan coba posting menyerupai pada judul diatas, yaitu membuat progres kafetaria warna warni di blog.Progress Bar yakni saat blog sobat loading maka akan muncul warna yang bergerak diatas header blog sobat. Progress Bar menyerupai loading animasi. Jika sobat sering buka instagram via website atau Google Adsense, niscaya sobat akan melihat garis yang berjalan di atas, dan akan hilang sesudah halaman sudah dimuat sepenuhnya.
Sobat juga dapat menciptakan progress kafetaria menyerupai itu dengan warna gradasi atau gradient. Nah, jikalau sobat ingin menciptakan progress kafetaria 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 arahan</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 memiliki loading yang sangat cepat, maka dampak progress kafetaria tidak akan terlihat. Meskipun terlihat, mungkin hanya beberapa detik saja.Nah, itulah postingan kali ini perihal Membuat Progress Bar Warna Warni Di Blog. Selamat mencoba dan agar bermanfaat.
Share this Article