Paski postępu / Progress

6 807 0
Sprawdź najnowszą wersję komponentu progress zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać.

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

25%
50%
75%
100%

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

25%
50%
75%
100%

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>

Przydało się? Oceń proszę jak bardzo: SłaboJako takoNie ma źleDobrzeRewelacja! (2 głosów, średnia: 5,00 na 5)
Loading...

Chcesz coś napisać?

Podziel się swoją opinią bądź dodaj coś od siebie.

*

*