bare de progres
O bară de progres poate fi folosit pentru a arăta cât de departe de-a lungul unui utilizator este într-un proces:
Basic Progress Bar
Clasa w3-progres-container definește un recipient pentru bara de progres, iar W3-ProgressBar definește bara de progres real (the "filled" area) . Setați lățimea barei de progres cu proprietatea lățime CSS:
Exemplu
<div class="w3-progress-container">
<div class="w3-progressbar" style="width:10%"></div>
</div>Progress Bar Dimensiuni
Setați lățimea / dimensiunea barei de progres, cu o valoare procentuală la 0 la 100%:
Exemplu
<div class="w3-progress-container">
<div class="w3-progressbar" style="width:50%"></div>
</div>Bara de progres Culori
În mod implicit, culoarea W3-progres-container este de culoare gri deschis și W3-ProgressBar este gri:
Isi schimba culoarea cu oricare dintre clasele de culoare W3.CSS:
Exemplu
<div class="w3-progress-container
w3-light-blue">
<div class="w3-progressbar
w3-blue" style="width:75%"></div>
</div>Cilindrat bare de progres
Utilizați oricare dintre clasele W3-rotunde pentru a adăuga colturi rotunjite la barele de progres:
Exemplu
<div class="w3-progress-container w3-round">
<div
class="w3-progressbar w3-round" style="width:25%"></div>
</div>Etichete Bara de progres
Adăugați un nou element in interiorul "w3-progressbar" pentru a adăuga o etichetă la bara de progres.
Sfat: Utilizați clasa W3-centru pentru a păstra întotdeauna eticheta centrată. Dacă omis, acesta va fi aliniat la stânga.
Exemplu
<div class="w3-progress-container">
<div id="myBar"
class="w3-progressbar w3-green" style="width:25%">
<div class="w3-center w3-text-white">25%</div>
</div>
</div>Dinamic Progress Bar
Utilizați JavaScript pentru a crea o bară de progres dinamic:
Exemplu
<div class="w3-progress-container">
<div id="myBar"
class="w3-progressbar w3-green" style="width:1%"></div>
</div>
<button class="w3-btn" 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>Dinamic Progress Bar cu etichete
Eticheta Centrat:
Aliniat la stânga eticheta:
Etichetă în afara bara de progres: