Събота 10 май 2025 г.
>> Крейзи Хорс, един безкраен празник  >> Кабаре Лидо, история на успеха и признанието  >> Най-необичайните кафенета от цял свят  >> Мулен руж, кабарето на живота  >> Дивали, индийската Нова година  >> Мозаечната стълба  >> Палмовите библиотеки в Индия  >> Плаващ автобус в Амстердам  >> Избрани цитати от Вятърничав - епизод 3  >> Вятърничав. Съдържание на 3 епизод  >> Багдатския булевард в Истанбул - Багдат джадеси  >> Вятърничав. Съдържание на епизодите. 2 епизод  >> Актьорски състав и героите от "Вятърничав"  >> Герои и актьорски състав от Вятърничав  >> Главни герои и актьорски състав от сериала "Вятърничав"  >> Вятърничав. Главни герои и актьорски състав  >> Имението Шадооулу в Мидят  >> За сюжета на сериала Harcai – Вятърничав  >> Избрани цитати от сериала Вятърничав - епизод 1  >> Вятърничав. Съдържание на епизодите. 1 епизод  >> Свежи пролетни и летни модни идеи 2023  >> Hercai-Bg - Вятърничав  >> Приказка за безсмъртната любов, родена от отмъщението  >> Тодоровден  >> Денят на Баба Марта  >> Коронацията на Чарлз III и смелата молба на Том Круз да присъства   >> Коронация Карла III и Том Круз   >> Coronation of Charles III and Tom Cruise  >> Она жила один раз, похоронена дважды  >> She lived once, buried twice  >> Живяла веднъж, погребана два пъти  >> Карнавал в Рио-де-Жанейро - часть вторая  >> Карнавал в Рио-де-Жанейро  >> Рио-де-Жанейро − ночная звезда Бразилии  >> Трифоновден  >> Рио де Жанейро - нощната звезда на Бразилия  >> Why Germany has no moral right to pressure us for Skopje  >> Почему Германия не имеет морального права оказывать на нас давление из-за Скопье  >> Защо Германия няма морално право да ни натиска за Скопие  >> Basta of the northern Macedonian melodrama    undefined

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

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

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

Progress Bar


Progress Bar


Progress Bar


Смятах да направя отдавна тази публикация, когато четох в един форум обсъждане на градиентна цветна анимация на фона с помощта само на 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>




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

BGtop

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


OpenCloseComments

2 Komentar

Cancel