DIY #7 Animowany progress bar
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:
[html]
<div class="progress">
<span style="width: 25%"></span>
</div>
[/html]
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:
[css]
.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;
}
[/css]
Podstawowe style mamy, ale jest tak jakoś miałko. Dodajmy więcej efektów. Zaokrąglijmy rogi, dodajmy cień wewnętrzny w tle:
[css]
.progress{
border-radius: 25px;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.3);
padding: 5px;
}
[/css]
Teraz wykorzystamy pseudo element :after do tego aby paskowi nadać trochę życia:
[css]
.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;
}
[/css]
Dodajemy sobie gradient na tło wielkości 50×50 a następnie go animujemy:
[css]
@-webkit-keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
[/css]
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
[js]
$(function() {
$(".progress > span").each(function() {
$(this)
.data("width", $(this).width())
.width(0)
.animate({
width: $(this).data("width")
}, 1500);
});
});
[/js]
Gotowy efekt prezentuje się tak:
Wcześniej w serii:
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