Download WordPress Themes, Happy Birthday Wishes

HTML5 Progress

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 :