Стилен Progress Scrollbar за Blogger блог

Pepa Tabakova
Pepa Tabakova
събота
Progress Scrollbar за Blogger блог
Здравейте, верни мои приятели и читатели! В предишни мои публикации споделих как да инсталирате в блог  Blogger Progress Scrollbar и Rainbow Progress Bar. Ако сте за първи път тук или сте пропуснали да ги прочетете, можете да го направите.

    Какво е Progress Bar?

    Да си припомним значението на термина.
    Progress Bar е елемент от графичния потребителски интерфейс, който представлява правоъгълен (в повечето случаи) панел за показване степента на изпълнение на една задача. Тя може да бъде изтегляне на файл през мрежата или зареждане на уеб страница. Когато се показва при преглеждане на уеб страница чрез скролиране този елемент е Progress Scrollbar . Обикновено плъзгачът на Progress Bar се запълва отляво надясно и се използва, когато изпълнението на задачата изисква да се показва информация.
    Progress Scrollbar - лентата за напредък (лента за прогрес) е много стилен и уникален начин да уведомите посетителите си колко се е заредила страницата, която четат. Ефектът от лентата за напредък при зареждане ще се появи, когато страницата на блога е в процес на зареждане и ще изчезне, когато страницата е напълно заредена. Инсталирането на тази лента за прогрес е доста лесно, защото има само един CSS код за нея. Ще ви покажа как можете лесно да инсталирате тази лента за напредък в блога си, без да имате проблеми.
    Освен това ще ви представя още няколко стилни Progress Scrollbar ленти за вашия блог в три варианта.

    Първи вариант

    Код


    <!--Progress Bar By Blogzablogove.com-->
    <div class="container">
    <div class="progress">
    <div class="bar"></div>
    </div>
    </div>
    <style>
    .container {
    width: 300px;
    margin: 30px auto 0;
    }
    .progress {
    overflow: hidden;
    height: 18px;
    background-color: #f7f7f7;
    background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);
    background-image: -ms-linear-gradient(top, #f5f5f5, #f9f9f9);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));
    background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);
    background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);
    background-image: linear-gradient(top, #f5f5f5, #f9f9f9);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0);
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    }
    .progress .bar {
    width: 50%;
    height: 18px;


    background-color: #0e90d2;
    background-image: -moz-linear-gradient(top, #149bdf, #0480be);
    background-image: -ms-linear-gradient(top, #149bdf, #0480be);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));
    background-image: -webkit-linear-gradient(top, #149bdf, #0480be);
    background-image: -o-linear-gradient(top, #149bdf, #0480be);
    background-image: linear-gradient(top, #149bdf, #0480be);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#149bdf', endColorstr='#0480be', GradientType=0);
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: width 0.6s ease;
    -moz-transition: width 0.6s ease;
    -ms-transition: width 0.6s ease;
    -o-transition: width 0.6s ease;
    transition: width 0.6s ease;
    }
    </style>

    <!--Progress Bar By Blogzablogove.com end-->

    Втори вариант

    Код


    <!--Progress Bar By Blogzablogove.com-->
    <div class="container">
    <div class="progress">
    <div class="bar"></div>
    </div>
    </div>
    <style>
    .container {
    width: 1200px;
    margin: 30px auto 0;
    }
    .progress {
    overflow: hidden;
    height: 5px;
    background-color: #f7f7f7;
    background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);
    background-image: -ms-linear-gradient(top, #f5f5f5, #f9f9f9);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));
    background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);
    background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);
    background-image: linear-gradient(top, #f5f5f5, #f9f9f9);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0);
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);

    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    }
    .progress .bar {
    width: 50%;
    height: 5px;
    background-color: #0e90d2;
    background-image: -moz-linear-gradient(top, #149bdf, #26c6da);
    background-image: -ms-linear-gradient(top, #149bdf, #026c6da);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#26c6da));
    background-image: -webkit-linear-gradient(top, #149bdf, #26c6da);
    background-image: -o-linear-gradient(top, #149bdf, #26c6da);
    background-image: linear-gradient(top, #149bdf, #26c6da);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#149bdf', endColorstr='#26c6da', GradientType=0);
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: width 0.6s ease;
    -moz-transition: width 0.6s ease;
    -ms-transition: width 0.6s ease;
    -o-transition: width 0.6s ease;
    transition: width 0.6s ease;
    }
    </style>

    <!--Progress Bar By Blogzablogove.com end-->

    Трети вариант

    Код


    <!--Progress Bar By Blogzablogove.com-->
    <div class="preloaderbar show active">      <span class="bar"></span>
    </div>
    <style>
    .preloaderbar {
    z-index: 1;
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    height: 4px;
    margin-bottom: -4px
    }
    .preloaderbar .bar {
    position: absolute;
    width: 100%;
    height: 0;
    text-indent: -9999px;
    background-color: #23b7e5
    }
    .preloaderbar .bar:before {
    position: absolute;
    right: 50%;
    left: 50%;
    height: 4px;
    background-color: inherit;
    content: ""
    }
    .preloaderbar.active {
    -webkit-animation: changebar 2.25s infinite 0.75s;
    -moz-animation: changebar 2.25s infinite 0.75s;
    animation: changebar 2.25s infinite 0.75s;
    }

    .preloaderbar.active .bar {
    -webkit-animation: changebar 2.25s infinite;
    -moz-animation: changebar 2.25s infinite;
    animation: changebar 2.25s infinite;
    }
    .preloaderbar.active .bar:before {
    -webkit-animation: movingbar 0.75s infinite;
    -moz-animation: movingbar 0.75s infinite;
    animation: movingbar 0.75s infinite
    }
    @-webkit-keyframes movingbar {
    0% {
    right: 50%;
    left: 50%
    }
    99.9% {
    right: 0;
    left: 0
    }
    100% {
    right: 50%;
    left: 50%
    }
    }
    @-moz-keyframes movingbar {
    0% {
    right: 50%;
    left: 50%
    }
    99.9% {
    right: 0;
    left: 0
    }
    100% {
    right: 50%;
    left: 50%
    }
    }
    @keyframes movingbar {
    0% {
    right: 50%;
    left: 50%
    }
    99.9% {
    right: 0;
    left: 0
    }
    100% {
    right: 50%;
    left: 50%
    }
    }
    @-webkit-keyframes changebar {
    0% {
    background-color: #8BC34A
    }
    33.3% {
    background-color: #8BC34A
    }
    33.33% {
    background-color: #FFCA28
    }
    66.6% {
    background-color: #FFCA28
    }
    66.66% {
    background-color: #F44336
    }
    99.9% {
    background-color: #F44336
    }
    }
    @-moz-keyframes changebar {
    0% {
    background-color: #8BC34A

    33.3% {
    background-color: #8BC34A
    }
    33.33% {
    background-color: #FFCA28
    }
    66.6% {
    background-color: #FFCA28
    }
    66.66% {
    background-color: #F44336
    }
    99.9% {
    background-color: #F44336
    }
    }
    @keyframes changebar {
    0% {
    background-color: #8BC34A
    }

    33.3% {
    background-color: #8BC34A
    }
    33.33% {
    background-color: #FFCA28
    }
    66.6% {
    background-color: #FFCA28
    }
    66.66% {
    background-color: #F44336
    }
    99.9% {
    background-color: #F44336
    }
    }
    </style>

    <!--Progress Bar By Blogzablogove.com end-->

    Инсталиране

    Как да инсталирате стилна и ефектна лента на Progress Bar във вашия Blogger блог

    ➤Използвайте този инструмент, за да изберете вашия код;
    ➤Използвайте притурката HTML/JavaScript и впишете избрания код в тялото ѝ;
    ➤Позиционирайте я възможно най-ниско в тялото на темата;


    За въпроси моля, в коментарите. А може и на тази страница.

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

    BGtop
    Или подкрепете моя проект




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


    Следвайте Blogzablogove


    Tags: Blogger, CSS
    OpenCloseComments
    Cancel