Създаване и водене на безплатен блог на платформата Blogger. Препоръки и съвети.

Търсене

Breaking

2019-06-20

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

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


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

    Progress Bar


    Progress Bar


    Progress Bar


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

    CSS

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

    Код


    #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%;}

    }


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

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

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

    HTML и Javascript

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

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


    Важно!


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


    Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога ми на:

    BGtop

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


    2 коментара:

    1. Лек и ненатрапчив ефект. Супер стана!

      +1 Благодаря!

      ОтговорИзтриване
      Отговори
      1. Радвам се, че ви харесва. Благодаря за посещението.

        Изтриване