Na paski postępu najczęściej natrafiamy podczas ładowania jakiś komponentów na naszych stronach WWW. Ale spotkamy je także w kilkuetapowych formularzach na przykład w sklepach internetowych podczas przechodzenia przez etapy zakupu lub przy zakładaniu kont w serwisach internetowych.
Podstawowy przykład
Budowa podstawowego paska postępu składa się z dwóch divów. Pierwszy „zewnętrzny” musi mieć klasę .progress, drugi „wewnętrzny” musi mieć klasę .progress-bar. Dodatkowo, aby nasz pasek postępu był przyjazny dla czytników ekranowych, zaleca się zastosowanie znaczników role="progressbar", aria-valuenow="*" gdzie zamiast * wstawiamy aktualną wartość postępu, aria-valuemin="0", który określa minimalną wartość oraz aria-valuemax="100", który określa wartość maksymalną. „Długość” paska określamy wpisując liniowo style="width: *%" gdzie pod * wstawiamy aktualną wartość postępu. Liniowe określenie szerokości pozwala nam na przesuwanie go o 1%. Gdyby nasz pasek miał mieć np tylko 3 etapy, możemy utworzyć sobie odpowiednie klasy. Pamiętajmy by szerokości były wyrażone procentowo by zachować responsywność.
Przykład
Kod
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Zmiana szerokości za pomocą klas
Jak pisałem wcześniej, szerokość paska postępu możemy zmienić za pomocą klas. Bootstrap ma przygotowane cztery gotowe klasy odpowiadające za 25%, 50%, 75%, 100%. Kolejno .w-25, .w-50, .w-75, .w-100. Oczywiście nic nie stoi na przeszkodzie byście stworzyli swoje własne klasy z potrzebnymi szerokościami.
Przykład
Kod
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar w-100" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Etykiety pasków postępu
Paski, które stworzyliśmy wyżej pokazują kolejne etapy. Ale czasami dobrze jest dodać jeszcze wartość liczbową, która będzie dokładnie pokazywać postęp. Uczynimy to w bardzo prosty sposób, wpisując ową wartość wewnątrz diva z klasą .progress-bar.
Przykład
Kod
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
</div>
<div class="progress">
<div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
</div>
<div class="progress">
<div class="progress-bar w-100" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
</div>
Wysokość pasków postępu
Potrafimy już zmienić szerokość paska postępu, dodajemy mu również etykietę. Ale kolejna rzecz, która by się nam przydała to zmiana wysokości paska. Jest to bardzo proste do wykonania. Pierwsza metoda to dopisanie liniowo stylu style="height: 1px;" do naszego „zewnętrzego” diva czyli tego z klasą .progress. Druga metoda to stworzenie swojej klasy definiującej szerokość i dodanie jej do wymienionego diva.
Przykład
Kod
<div class="progress" style="height: 1px;">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="height: 25px;">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
<div class="progress" style="height: 50px;">
<div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
</div>
<div class="progress" style="height: 75px;">
<div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
</div>
<div class="progress" style="height: 100px;">
<div class="progress-bar w-100" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
</div>
Kolory pasków postępu
Skoro zmieniliśmy już zarówno wysokość jak i szerokość pasków, to nadszedł czas na zmianę koloru tła. Posłużę się tu znanymi Wam już klasami kolorów dostępnych W Bootstrapie. Mamy tu do wyboru następujące klasy:
.bg-primary.bg-secondary.bg-success.bg-danger.bg-warning.bg-info.bg-light.bg-dark
Przykład
Kod
<div class="progress">
<div class="progress-bar bg-primary" role="progressbar" style="width: 12.5%" aria-valuenow="12.5" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-secondary" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 37.5%" aria-valuenow="37.5" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" style="width: 62.5%" aria-valuenow="62.5" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-light" role="progressbar" style="width: 87.5%" aria-valuenow="87.5" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-dark" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Wielokrotne paski postępu
Zmieniliśmy sobie kolory teł pasków postępu. Ale chcieli byśmy aby każdy z etapów miał inny kolor. Proszę bardzo:) Wystarczy, że wewnątrz diva z klasą .progress umieścimy kilka divów z klasą .progress-bar. Pamiętajmy tylko by suma ich szerokości nie przekroczyła 100%:)
Przykład
Kod
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-danger" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Paski postępu w paski”
Na sam koniec trochę inna wersja kolorowych pasków. Wystarczy „wewnętrznemu” divovi czyli temu z klasą .progress-bar dodać klasę .progress-bar-striped.
Przykład
Kod
<div class="progress">
<div class="progress-bar bg-primary progress-bar-striped" role="progressbar" style="width: 12.5%" aria-valuenow="12.5" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-secondary progress-bar-striped" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-success progress-bar-striped" role="progressbar" style="width: 37.5%" aria-valuenow="37.5" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-danger progress-bar-striped" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-warning progress-bar-striped" role="progressbar" style="width: 62.5%" aria-valuenow="62.5" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-info progress-bar-striped" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-light progress-bar-striped" role="progressbar" style="width: 87.5%" aria-valuenow="87.5" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-dark progress-bar-striped" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Loading...