Supporté par ChromeSupporté par FirefoxSupporté par EdgeSupporté par Safari/iOS <progress> : Démo HTML5

Mise à jour : 2017-01-22
Équivalent de progressmeter dans le langage XUL, cette balise qui conforte la position de HTML5 comme langage applicatif et non plus seulement comme langage descriptif, permet de donner l'état d'avancement d'une tâche.

<progress>

Notes sur le tuto


Exemple de code HTML5

<progress id="progressBar" value="66.6" max="100">
	<span class="ko">&lt;progress&gt; 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


<progress> non supporté par votre navigateur !

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>		

Can I Use progress? Data on support for the progress feature across the major browsers from caniuse.com.