Rainbow Progress Bar в Blogger с помощта на CSS

Как да направим Rainbow Progress Bar в Blogger с помощта на чист CSS? Ако отворите уеб сайта на Instagram със сигурност ще видите цветната линия, която винаги се появява най-горе, движи се отляво надясно и изчезва, когато приключи напълно зареждането на страницата.

Публикацията е редактирана и обновена през януари 2020 година
Това е така наречената градиентна цветна лента на Instagram. Ще я срещнете и под наименованието"лента за напредък в стила на дъгата в Instagram ". Може да е под формата на появяваща се линия, едноцветна или с цветовете на дъгата, въртяща се фигура или в проценти. Така получаваме информация за скоростта и степента на зареждане на една страница. Понякога може и да не се забележи, ако зареждането на страницата става много бързо.

Смятах да направя отдавна тази публикация, когато четох в един форум обсъждане на градиентна цветна анимация на фона с помощта само на CSS. Защото ефекта на Rainbow и цветовата градация може да се използва и на друго място в блога - като Progress Bar.
Прочетете днешния супер лесен урок, приложете го и ви е гарантирано, че няма да направите блога си по-тежък и по-бавен при зареждане.

CSS

Добавете следния CSS код към кода на темата си в участъка на стиловете му преди ]]></b:skin>.

Код

#blogzablogoveProgressBar {

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

0% {background-position: 0% 100%;}

50% {background-position: 100% 200%;}

100% {background-position: 0% 100%;}

}

@-moz-keyframes blogzablogoveProgressBar {

0% {background-position: 0% 100%;}

50% {background-position: 100% 200%;}

100% {background-position: 0% 100%;}

}

Можете да промените в кода няколко неща:

➤Маркираното в синьо е височина ( дебелината ) на лентата за напредък. Колкото по-голямо е числото, толкова по-широка е лентата;

➤Маркираното в червено са настройките за цвят и анимация;

HTML и Javascript

За да се покаже напредъка на зареждането на страницата като лента впишете следния код преди </ body> в кода на темата:

<div id='blogzablogoveProgressBar'/>

<script> //<![CDATA[

function blogzablogoveBar(){document.getElementById('blogzablogoveProgressBar').style.display='none';}

window.addEventListener ? window.addEventListener('load',blogzablogoveBar,false) : window.attachEvent && window.attachEvent('onload',blogzablogoveBar);

//]]></script>

Важно!

Моля, запомнете: в блогове, които имат много лек размер на страницата, може би лентата за напредък в стила на дъгата в Instagram няма да се забележи, защото времето за зареждане е супер бързо. Всъщност тя се появява, но само за части от секундата, така че забелязването ѝ е доста трудно.

По-лесният начин 

За тези от вас, които все още се страхуват да променят каквото и да е в кода на темата си, по-лесно е да впишете следния код в притурка Html/JavaScript и да я позиционирате по-ниско в темата на блога си.

<style>

#blogzablogoveProgressBar {

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: blogzablogoveProgressBar 5s ease infinite; -moz-animation: blogzablogovelProgressBar 5s ease infinite; -webkit-animation: blogzablogoveProgressBar 5s ease infinite; -o-animation: blogzablogoveProgressBar 5s ease infinite;

}

@keyframes blogzablogoveProgressBar {

0% {background-position: 0% 100%;}

50% {background-position: 100% 200%;}

100% {background-position: 0% 100%;}

}

@-moz-keyframes blogzablogoveProgressBar {

0% {background-position: 0% 100%;}

50% {background-position: 100% 200%;}

100% {background-position: 0% 100%;}

}

</style>

<div id='blogzablogoveProgressBar'/>

<script> //<![CDATA[

function blogzablogoveBar(){document.getElementById('blogzablogoveProgressBar').style.display='none';}

window.addEventListener ? window.addEventListener('load',blogzablogoveBar,false) : window.attachEvent && window.attachEvent('onload',blogzablogoveBar);

//]]></script></div>

Ще съм благодарна да оцените моя труд като гласувате за блога ми на:


Здраве за всички вас! Не забравяйте да правите добро на други хора!