Barres de progression W3.CSS
Une barre de progression peut être utilisée pour montrer où en est un utilisateur dans un processus :
Barre de progression de base
Un élément <div> normal peut être utilisé pour une barre de progression.
La propriété CSS width peut être utilisée pour définir la hauteur et la largeur d'une barre de progression.
Exemple
<div class="w3-border">
<div class="w3-grey" style="height:24px;width:20%"></div>
</div>
Largeur de la barre de progression
Modifiez la largeur d'une barre de progression avec la propriété CSS width (de 0 à 100%) :
Exemple
<div class="w3-light-grey">
<div class="w3-grey" style="height:24px;width:50%"></div>
</div>
Couleurs de la barre de progression
Utilisez les classes de couleurs w3- pour changer la couleur d'une barre de progression :
Exemple
<div class="w3-light-grey">
<div class="w3-blue" style="width:75%"></div>
</div>
Étiquettes de la barre de progression
Ajoutez du texte dans un élément w3-container pour ajouter une étiquette à la barre de progression.
Utilisez la classe w3-center pour centrer l'étiquette. S'il est omis, il sera aligné à gauche.
Exemple
<div class="w3-light-grey">
<div
class="w3-container w3-green w3-center" style="width:25%">25%</div>
</div>
Taille du texte de la barre de progression
Utilisez les classes w3 - size pour modifier la taille du texte dans le conteneur :
Exemple
<div class="w3-light-grey w3-xlarge">
<div class="w3-container w3-green" style="width:50%">50%</div>
</div>
Rembourrage de la barre de progression
Utilisez les classes w3-padding pour ajouter du remplissage au conteneur.
Exemple
<div class="w3-light-grey">
<div
class="w3-container w3-red w3-padding w3-center" style="width:25%">25%</div>
</div>
</div>
Barres de progression arrondies
Utilisez les classes w3-round pour ajouter des coins arrondis à une barre de progression :
Exemple
<div class="w3-light-grey w3-round">
<div
class="w3-container w3-round w3-blue" style="width:25%">25%</div>
</div>
Barre de progression dynamique
Utilisez JavaScript pour créer une barre de progression dynamique :
Exemple
<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>
Barre de progression dynamique avec étiquettes
Libellé centré :
Exemple
Libellé aligné à gauche :
Exemple
Libellé à l'extérieur de la barre de progression :
Exemple
20%
Un autre exemple (avancé):
Exemple
Added 0 of 10 photos