barres de progression
Une barre de progression peut être utilisée pour montrer dans quelle mesure le long d'un utilisateur est dans un processus:
-
Basic barre de progression
La classe w3-progress-conteneur définit un conteneur pour la barre de progression et le w3-progressbar définit la barre de progression réelle (la zone "rempli"). Régler la largeur de la barre de progression avec la propriété CSS width:
Exemple
<div class="w3-progress-container">
<div class="w3-progressbar" style="width:10%"></div>
</div>Barre de progression Tailles
Définissez la largeur / taille de la barre de progression avec une valeur de pourcentage de 0 à 100%:
Exemple
<div class="w3-progress-container">
<div class="w3-progressbar" style="width:50%"></div>
</div>Progress Bar Couleurs
Par défaut, la couleur de la w3-progress-conteneur est gris clair et le w3-progressbar est gris:
Changer leur couleur à l'une des classes de couleurs de W3.CSS:
Exemple
<div class="w3-progress-container
w3-light-blue">
<div class="w3-progressbar
w3-blue" style="width:75%"></div>
</div>Bars Progress Arrondi
Utilisez l' une des classes w3-rondes pour ajouter des coins arrondis à vos barres de progression:
Exemple
<div class="w3-progress-container w3-round">
<div
class="w3-progressbar w3-round" style="width:25%"></div>
</div>Progress Bar Labels
Ajouter un nouvel élément à l'intérieur du "w3-progressbar" pour ajouter une étiquette à la barre de progression.
Astuce: Utilisez la classe w3 centre de toujours garder l'étiquette centrée. En cas d'omission, il sera aligné à gauche.
Exemple
<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>Dynamic Progress Bar
Utilisez JavaScript pour créer une barre de progression dynamique:
-
Exemple
<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>Dynamic Progress Bar avec étiquettes
étiquette Centré:
Aligné à gauche label:
Étiquette à l'extérieur de la barre de progression: