Barre de progression en HTML 5

Entre les lectures du forum et celle des nouvelle version de HTML5, je me demandais comment créer une barre de progression, relativement simple, et bien la voici:



Actuellement, c est par le code source que je modifie la progression de la barre, mais c'est peut être une efficacité qui plus est une méthode, pour les membres qui ont des petites bases SQL.

Par contre sous Safari & Internet Explorer, vous ne verrez rien.


Voici le code source:




Code HTML :
<progress id="progressBar" value="66.6" max="100"></progress>
<span id="percent"></span>
<script>
eltBar = document.getElementById("progressBar");
eltPct = document.getElementById("percent");
eltPct.innerHTML = eltBar.position * 100 + "%";
</script>



Quelques mots d'explication:




É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.

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


Voir aussi ces articles sur ce site :

- Barre de progression
- Barre de progression similaire à celle de Windows


Cet article à été publié par Hight_tower sur la partie forum.

Cette page a été vue 9499 fois