La balise HTML <progress> permet d’afficher la progression d’une tâche. Il fournit aux développeurs Web un moyen simple de créer une barre de progression sur le site Web. Il est principalement utilisé pour afficher la progression du téléchargement d’un fichier sur la page Web.
La balise de progression HTML est nouvelle dans HTML5, vous devez donc utiliser un navigateur qui lui supporte.
Attributs de balise progress
La balise <progress> prend en charge les attributs globaux et d’événement, ainsi que 2 attributs spécifiques.
| Étiquette | La description |
|---|---|
| value | Il définit le volume de travail accompli par la tâche. |
| max | Il définit le volume de travail requis par la tâche. |
Remarque : La balise progress doit être utilisée pour représenter la progression d’une tâche uniquement, pas seulement pour une jauge (utilisation de la vitesse du disque). Pour cela, l’élément <mètre> est utilisé.
Exemple de balise progress
Voyons un exemple d’utilisation de la balise progress.
<progress> </progress>
Résultat :
Voyons l’exemple de progression avec les attributs value et max.
Progression du téléchargement: <progress value = "43" max = "100"> </progress>
Résultat :
Progression du téléchargement:
Style de Barre de progression
Vous pouvez appliquer le code CSS sur la balise progress.
progress{
width: 300px;
height: 30px;
}
Balise progress avec JavaScript
La balise <progress> doit être utilisée avec JavaScript pour afficher la progression d’une tâche.
<script>
var gvalue=1;
function abc(){
var progressExample = document.getElementById ('progress-javascript-example');
setInterval (function ()
{
if(gvalue<100){
gvalue++;
progressExample.value =gvalue;
}
abc();
}, 1000);
}
</script>
<progress id="progress-javascript-example" min="1" max="100"></progress>
<br/><br/>
<button onclick="abc()">cliquez sur moi</button>
Résultat :