Source

Pokrok

Dokumentácia a príklady používania vlastných pruhov priebehu Bootstrapu s podporou pre skladané pruhy, animované pozadia a textové štítky.

Ako to funguje

Komponenty Progress sa skladajú z dvoch prvkov HTML, niektorých CSS na nastavenie šírky a niekoľkých atribútov. Nepoužívame prvok HTML5<progress> , čo zaisťuje, že môžete ukladať indikátory priebehu, animovať ich a umiestniť na ne textové štítky.

Používame .progressako obal na označenie maximálnej hodnoty indikátora priebehu.
Vnútorné používame .progress-barna označenie doterajšieho pokroku.
Vyžaduje vložený štýl , .progress-bartriedu nástrojov alebo vlastný CSS na nastavenie ich šírky.
Vyžaduje .progress-bartiež niektoré atribúty role, ariaaby bol prístupný.

Dajte to všetko dohromady a máte nasledujúce príklady.

<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>

Bootstrap poskytuje niekoľko nástrojov na nastavenie šírky . V závislosti od vašich potrieb vám môžu pomôcť pri rýchlej konfigurácii pokroku.

<div class="progress">
  <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Štítky

Pridajte štítky do svojich indikátorov priebehu umiestnením textu do .progress-bar.

25 %

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

Výška

Nastavíme iba heighthodnotu na .progress, takže ak zmeníte túto hodnotu, vnútorná .progress-barsa automaticky zodpovedajúcim spôsobom zmení.

<div class="progress" style="height: 1px;">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="height: 20px;">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Pozadia

Použite triedy nástrojov na pozadí na zmenu vzhľadu jednotlivých indikátorov priebehu.

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-info" 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: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Viaceré pruhy

V prípade potreby zahrňte do komponentu postupu viacero indikátorov priebehu.

<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-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Pruhované

Pridať .progress-bar-stripeddo ľubovoľnej .progress-bar, ak chcete použiť pruh cez prechod CSS na farbu pozadia indikátora priebehu.

<div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Animované pruhy

Pruhovaný prechod môže byť tiež animovaný. Pridať .progress-bar-animatedna .progress-baranimáciu pruhov sprava doľava prostredníctvom animácií CSS3.

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>