<progress> : Démo HTML5
Mise à jour : 2017-01-22
<progress>
- value : attribut désignant la valeur actuel de l'état d'avancement
- max : attribut indiquant la valeur maximale à atteindre
- position : attribut en lecture seule indiquant le pourcentage d'avancement
Notes sur le tuto
- Limitations :
- Sous Chrome, le visuel de barre de progression n'est plus animé, contrairement à Firefox.
- Edge et IE ne restituent pas correctement le pourcentage d'avancement (66.60000085830688% au lieu de 66.6%).
Cette erreur perdure même avec des nombres entiers.
- Voir aussi <meter>.
Exemple de code HTML5
<progress id="progressBar" value="66.6" max="100"> <span class="ko"><progress> non supporté par votre navigateur !</span> </progress> <span id="percent"></span> <script> eltBar = document.getElementById("progressBar") eltPct = document.getElementById("percent") eltPct.innerHTML = eltBar.position * 100 + "%" </script>
Démonstration du résultat HTML5
Détection automatique du support HTML5
Librairie JavaScript de détection automatique (attention, comporte quelques faux positifs et faux négatifs)<script src="_html5detect.js"></script> <script>isTagSupported("progress")</script>