HTML
Élément de progrès
Recherche…
Paramètres
| Paramètre | Valeur |
|---|---|
| max | Combien de travail la tâche exige au total |
| valeur | Combien de travail a déjà été accompli |
| position | Cet attribut renvoie la position actuelle de l'élément <progress> |
| Étiquettes | Cet attribut renvoie une liste d'étiquettes d'élément <progress> (le cas échéant) |
Remarques
L'élément <progress> n'est pas pris en charge dans les versions d'Internet Explorer inférieures à 10
L'élément <progress> est le mauvais élément à utiliser pour quelque chose qui n'est qu'une jauge, plutôt que la progression de la tâche. Par exemple, l'affichage de l'utilisation de l'espace disque à l'aide de l'élément <progress> est inapproprié. Au lieu de cela, l'élément <meter> est disponible pour ce type de cas d'utilisation.
Le progrès
L'élément <progress> est nouveau en HTML5 et sert à représenter la progression d'une tâche
<progress value="22" max="100"></progress>
Cela crée une barre remplie 22%
Changer la couleur d'une barre de progression
Les barres de progression peuvent être stylées avec le sélecteur de progress[value] .
Cet exemple donne une barre de progression d'une largeur de 250px et d'une hauteur de 20px
progress[value] {
width: 250px;
height: 20px;
}
Les barres de progression peuvent être particulièrement difficiles à mettre en forme.
Chrome / Safari / Opera
Ces navigateurs utilisent le sélecteur d' -webkit-appearance pour personnaliser la balise de progression. Pour annuler cela, nous pouvons réinitialiser l'apparence.
progress[value] {
-webkit-appearance: none;
appearance: none;
}
Maintenant, nous pouvons styliser le conteneur lui-même
progress[value]::-webkit-progress-bar {
background-color: "green";
}
Firefox
Firefox classe la barre de progression un peu différemment. Nous devons utiliser ces styles
progress[value] {
-moz-appearance: none;
appearance: none;
border: none; /* Firefox also renders a border */
}
Internet Explorer
Internet Explorer 10+ prend en charge l'élément de progress . Cependant, il ne prend pas en charge la propriété background-color . Vous devrez utiliser la propriété color à la place.
progress[value] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none; /* Remove border from Firefox */
width: 250px;
height: 20px;
color: blue;
}
HTML de repli
Pour les navigateurs qui ne prennent pas en charge l'élément de progress , vous pouvez l'utiliser comme solution de contournement.
<progress max="100" value="20">
<div class="progress-bar">
<span style="width: 20%;">Progress: 20%</span>
</div>
</progress>
Les navigateurs qui prennent en charge la balise de progression ignorent le div imbriqué à l'intérieur. Les navigateurs existants qui ne peuvent pas identifier la balise de progression afficheront le div à la place.
