DIY #7 Animowany progress bar | DailyWeb.pl - codziennie o sieci

DIY #7 Animowany progress bar

Opublikowano 2 lata temu -


Ostatnio wszędzie można zobaczyć animowane progress bary pokazujące różne rzeczy. Od poziomu umiejętności freelancera w danej technologii, po chociażby paski postępu w rejestracji czy finalizacji zakupów. Dziś będziecie mogli zobaczyć jak stworzyć taki paseczek i używać go na swoich stronach. Dzięki niemu na pewno będziecie szczęśliwsi.

Na początek idea:

Jaki progress bar jest każdy wie (jeśli nie to zapraszam tu), potrzebujemy tło, które będzie tworzyło pustą przestrzeń gotową w każdej chwili na wypełnienie oraz samo wypełnienie. Dodatkowo zrobimy sobie jakieś dodatki do tego.

Nasze tło to <div> a pasek to <span> w nim:


<div class="progress">
    <span style="width: 25%"></span>
</div>

Zamiast <span> można także użyć pseudo elementu :after, ale będzie mi on potrzebny później. Wypełnienie będziemy ustawiać poprzez szerokość wpisaną inline. Dzięki temu jQuery będzie nam pasek postępu animowało, a jeśli zajdzie taka potrzeba aktualizowało.

To właściwie tyle jeśli chodzi o strukturę HTML i wprowadzenie. Czas na stylowanko!
Tło zrobimy sobie szare a pasek w kolorze, dodamy mu cień wewnętrzny aby stworzyć efekt wypukłości:

.progress{
    position: relative;
    height: 20px;
    margin: 20px 0 20px 0;
    background: #bdc3c7;
    width: 90%;
}
.progress > span {
    display: block;
    height: 100%;
    background-color: rgb(230, 126, 34);
    box-shadow:
    inset 0 2px 9px rgba(255,255,255,0.3),
    inset 0 -2px 6px rgba(0,0,0,0.4);
    position: relative;
    overflow: hidden;
}


Podstawowe style mamy, ale jest tak jakoś miałko. Dodajmy więcej efektów. Zaokrąglijmy rogi, dodajmy cień wewnętrzny w tle:

.progress{
    border-radius: 25px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.3);
    padding: 5px;
}


Teraz wykorzystamy pseudo element :after do tego aby paskowi nadać trochę życia:

.progress.four > span:after{
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background-image:
       -webkit-gradient(linear, 0 0, 100% 100%,
       color-stop(.25, rgba(255, 255, 255, .2)),
       color-stop(.25, transparent), color-stop(.5, transparent),
       color-stop(.5, rgba(255, 255, 255, .2)),
       color-stop(.75, rgba(255, 255, 255, .2)),
       color-stop(.75, transparent), to(transparent)
    );
    z-index: 1;
    -webkit-background-size: 50px 50px;
    -webkit-animation: move 2s linear infinite;
    overflow: hidden;
}

Dodajemy sobie gradient na tło wielkości 50x50 a następnie go animujemy:

@-webkit-keyframes move {
    0% {
       background-position: 0 0;
    }
    100% {
       background-position: 50px 50px;
    }
}

Pozostaje nam dopisanie 10 linijek jQuery aby dodać efekt wypełniania się pasków. Znajdujemy wartość szerokości jaka jest podana w stylu inline w naszym wypełnieniu <span> a następnie animujemy. 1500 to wartość w milisekundach - ile trwa animacja wypełniania


$(function() {
   $(".progress > span").each(function() {
      $(this)
         .data("width", $(this).width())
         .width(0)
         .animate({
            width: $(this).data("width")
         }, 1500);
   });
});

Gotowy efekt prezentuje się tak:

Zobacz fiddla

Wcześniej w serii:

DIY #6 - Karuzela w CSS3

DIY #5 - Tworzymy logo Androida w CSS3

DIY #4 - Jak samemu zrobić logo Chrome w CSS3

DIY#3 - Elementy menu zawsze wyjustowane na całej szerokości kontenera

DIY#2.5 – Custom checkbox i radio button – tylko CSS