Barre de progression
Aperçu
Chef de projet : Laurent Goderre (@LaurentGoderre)
Objet
L'élément progress
de HTML5 affiche la progression d'une tâche. Étant donné que certains navigateurs ne prennent pas en charge cette fonctionnalité à l'origine, ce correctif émule la même fonctionnalité à l'aide de HTML générique et WAI-ARIA.
Raison d’être
Les navigateurs qui ne prennent pas en charge l'élément progress
ignore l'élément. Par conséquent, rien est affiché et son contenu n'est pas exposé à des technologies d'assistance. Ce correctif assure que l'élément progress
est visuellement convertie en une barre coulissante et exposé aux technologies d'assistance en ajoutant WAI-ARIA.
Mise en œuvre
Pour utiliser le correctif, un élément progress
doit être utilisé. Dans les cas où le navigateur ne soutien pas l'élément progress
, le correctif est automatiquement chargé.
Paramètres
Le correctif de l'élément progress
accepte deux paramètres : max
et value
. Aucune de ces paramètres sont obligatoires.
Paramètre value
This parameter represent the progress of the task and can be any decimal number between 0 and the max
value. If value
is omitted, the progress bar is considered to be indeterminate, which means that there is no indication on the actual progress of the task.
Paramètre max
This parameter represent the maximum progress for the task. When the value
parameter is set to the maximum value, the task is considered complete. The max
parameter can be any positive decimal number. If the parameter is omitted, the default value of 1.0 is assumed.
Code d'exemple
Tâche en cours
<progress value="25" max="100" />
Tâche terminée
<progress value="50" max="50" />
Tâche de progression indéterminée
<progress />
<progress max="50" />
Exemples
Développement
La barre de progression est dépendent sur le soutien natif pour l'élément progress
de HTML5 et le correctif pour l'élément progress
.
- js/polyfills/progress.js - contient le code JavaScript pour le correctif pour l'élément
progress
- js/sass/includes/_progress.scss - contient le CSS pour le correctif pour l'élément
progress
- js/images/progress/ - contient les images pour le correctif pour l'élément
progress
Problèmes connus
Il n’existe actuellement aucun problème connu.
Historique des versions
Références
- Date de modification :