W3.CSS Progress Bars


Ukazatel průběhu lze použít k zobrazení toho, jak daleko je uživatel v procesu:

20 %


Základní ukazatel průběhu

Pro ukazatel průběhu lze použít normální prvek <div>.

Vlastnost CSS width lze použít k nastavení výšky a šířky ukazatele průběhu.

Příklad

<div class="w3-border">
  <div class="w3-grey" style="height:24px;width:20%"></div>
</div>


Šířka ukazatele průběhu

Změňte šířku ukazatele průběhu pomocí vlastnosti width CSS (od 0 do 100 %):



Příklad

<div class="w3-light-grey">
  <div class="w3-grey" style="height:24px;width:50%"></div>
</div>



Barvy ukazatele průběhu

Ke změně barvy ukazatele průběhu použijte třídy barev w3- :



Příklad

<div class="w3-light-grey">
  <div class="w3-blue" style="width:75%"></div>
</div>


Štítky ukazatele pokroku

Přidejte text do prvku w3-container a přidejte štítek na ukazatel průběhu.

K vystředění štítku použijte třídu w3-center . Pokud je vynechán, bude zarovnán doleva.

25 %

50 %

75 %

Příklad

<div class="w3-light-grey">
  <div class="w3-container w3-green w3-center" style="width:25%">25%</div>
</div>


Velikost textu ukazatele průběhu

Ke změně velikosti textu v kontejneru použijte třídy velikosti w3 :

50 %

50 %

50 %

Příklad

<div class="w3-light-grey w3-xlarge">
  <div class="w3-container w3-green" style="width:50%">50%</div>
</div>


Progress Bar Polstrování

Použijte třídy w3-padding k přidání odsazení do kontejneru.

25 %

25 %

25 %

Příklad

<div class="w3-light-grey">
  <div class="w3-container w3-red w3-padding w3-center" style="width:25%">25%</div>
  </div>
</div>


Zaoblené ukazatele pokroku

Použijte třídy w3-round k přidání zaoblených rohů do ukazatele průběhu:

25 %

25 %

25 %

Příklad

<div class="w3-light-grey w3-round">
  <div class="w3-container w3-round w3-blue" style="width:25%">25%</div>
</div>


Dynamický ukazatel průběhu

Pomocí JavaScriptu vytvořte dynamický ukazatel průběhu:


Příklad

<div class="w3-light-grey">
  <div id="myBar" class="w3-container w3-green" style="height:24px;width:1%"></div>
</div>

<button class="w3-button w3-light-grey" onclick="move()">Click Me</button>

<script>
function move() {
  var elem = document.getElementById("myBar");
  var width = 1;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++;
      elem.style.width = width + '%';
    }
  }
}
</script>


Dynamický ukazatel průběhu s popisky

Štítek na střed:

Příklad

20%

Štítek zarovnaný doleva:

Příklad

20%

Štítek mimo ukazatel průběhu:

Příklad

20%

Další příklad (pokročilý):

Příklad

Added 0 of 10 photos