Pasek postępu – Bootstrap Progress bars

Czas czytania: < 1 minut

Paski postępu są ciekawymi dodatkami stron internetowych. Oczywiście nie występują one na każdej witrynie, ale i tak warto się z nimi zapoznać.

W Bootstrap istnieje kilka domyślnych wzorów pasków postępu Progress bars.

Najprostszym przykładem paseka postępu jest:

<div class="progress">
<div class="progress-bar" style="width: 70%;" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"><br><span class="sr-only">70% Complete</span></div>
</div>

Powyższy pasek postępu przedstawia wartość 70%. Pasek może również zawierać wpisaną wartość.

<div class="progress">
<div class="progress-bar" style="width: 70%;" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">70% - lub inny tekst</div>
</div>

Domyślnie paski mogą zawierać kolory:

success

<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 40%;" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"><span class="sr-only">40% Complete (success)</span></div>
</div>

---

info

<div class="progress">
<div class="progress-bar progress-bar-info" style="width: 20%;" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"><span class="sr-only">20% Complete</span></div>
</div>

---

warning

<div class="progress">
<div class="progress-bar progress-bar-warning" style="width: 60%;" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"><span class="sr-only">60% Complete (warning)</span></div>
</div>

---

danger

<div class="progress">
<div class="progress-bar progress-bar-danger" style="width: 80%;" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"><span class="sr-only">80% Complete (danger)</span></div>
</div>

---

Lub wyglądać tak

<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" style="width: 40%;" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"><span class="sr-only">40% Complete (success)</span></div>
</div>

---

<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" style="width: 20%;" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"><span class="sr-only">20% Complete</span></div>
</div>

---

<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 60%;" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"><span class="sr-only">60% Complete (warning)</span></div>
</div>

---

<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" style="width: 80%;" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"><span class="sr-only">80% Complete (danger)</span></div>
</div>

---

<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%;"><span class="sr-only">35% Complete (success)</span></div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%;"><span class="sr-only">20% Complete (warning)</span></div>
<div class="progress-bar progress-bar-danger" style="width: 10%;"><span class="sr-only">10% Complete (danger)</span></div>
</div>

Powyższe paski są standardowe, na ich podstawie możemy sami tworzyć nowe wedle własnego uznania.