
Pasek postępu (progress bar) w projekcie Web? Jasne – i to bez użycia obrazków. Dziś krótko i na temat.
Pasek postępu w CSS i HTML5
Możemy skorzystać z HTML5 i Bootstrap, lub zdefiniować własne style CSS.
Sposób 1 – HTML5
Dodajmy do strony Bootstrap i jQuery, oraz kod jak poniżej.
... <div class="progress" style="width: 50%"> <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> 40% (default style) </div> </div>
Gotowe. Mamy pasek postępu! Kolory i postęp definiujemy poprzez klasy CSS (np. class=”progress-bar progress-bar-danger”) oraz właściwości (np. role=”progressbar”, aria-valuenow=”100″). A ponadto ustawiamy szerokość elementu (style width).
Więcej przykładów pasków postępu poniżej.
... <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%"> Success </div> </div> <div class="progress"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%"> Info </div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%"> Warning </div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"> Danger </div> </div>
Prosto i efektywnie. Przykładowe paski postępu:
Być może jednak chcemy stworzyć własny pasek postępu w CSS – żaden problem.
Sposób 2 – CSS
Załóżmy, że nie chcemy używać Bootstrapa, chcemy za to mieć pełną kontrolę nad wyglądem naszych pasków postępu. Do ich stworzenia wystarczy do tego prosty trick CSS.
#my-progress-bar { background: #ccc; border-radius: 12px; height: 22px; width: 330px; padding: 0px; margin: 0 auto; } #my-progress-bar:after { content: ''; display: block; background: #0c0; width: 50%; height: 100%; border-radius: 9px; }
Teraz wystarczy pokazać nasz progress bar:
<div id="my-progress-bar"></div>
Demo:
Zasoby:
Książki o CSS, HTML5, JavaScript
ProBars – jQuery animated progress bars plugin
Slim progress bar jQuery plugin – NProgress
Więcej interesujących rozwiązań CSS znajdziemy tutaj.
Pasek postępu w CSS – podsumowanie
Jak widać HTML5, Bootstrap oraz CSS przynoszą nam dość możliwości, aby prosto i przyjemnie tworzyć na stronach WWW obiekty takie jak paski postępu, bez użycia obrazków.
Dziękuję za uwagę. Miłej zabawy.