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