W3.CSS Progress Bars
Ukazatel průběhu lze použít k zobrazení toho, jak daleko je uživatel v procesu:
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.
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 :
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.
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:
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
Štítek zarovnaný doleva:
Příklad
Štítek mimo ukazatel průběhu:
Příklad
20%
Další příklad (pokročilý):
Příklad
Added 0 of 10 photos