Paski postępu / Progress

982 0

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

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

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

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

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

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

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

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

Chcesz coś napisać?

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

*

*