oujood.com

 HTML La Barre de progression  La balise <progress> la progression d'une tâche ou l'état d'un évènement

La balise <progress> représente la progression d'une tâche ou l'état d'un évènement en cours de réalisation.

chercher |

Définition et utilisation Balise progress

LES BALISES HTML

Pour représenter et afficher la progression d'une tâche ou l'état d'un évènement en cours de réalisation en HTML5 on utilise la balise <progress>.


Exemple Progression d’une tache en cours :

Exemple :       Copier le code

  <!DOCTYPE html>
  <html>
  <head>
  <meta charset="UTF-8">
  <title>La Barre de progression:</title>
  <style>
  #progressbar { border-radius:6px; } 
   
  </style>
  </head>
  <body>
   
  Avancement de la tache:
  <progress id="progressbar" value="22"
  max="100">50%
  </progress>
   
  </body>
  </html>
 

Appui de navigateur

Internet Explorer Firefox Opera Google Chrome Safari

La balise <progress> est prise en charge dans Internet Explorer 10, Firefox, Opera, Chrome et Safari 6.

Remarque : La balise <progress> n'est pas pris en charge dans Internet Explorer 9 et versions antérieures.


Différences entre HTML 4.01 et HTML5

La balise <progress> est nouvelle en HTML5.


Trucs et astuces

Astuce : Utilisez la balise <progress> conjointement avec JavaScript pour afficher la progression d'une tâche animée.

Note: la balise <progress> n'est pas adaptée pour représenter une jauge (EX : espace disque ou la pertinence d'un résultat d’une  requête). Pour représenter une jauge, utilisez plutôt la balise <meter> .


Attributs de la balise progress

Nouveau : Nouveau en HTML5.

Attribut

Valeur

Description

max

nombre

C'est la valeur totale que représente la barre et la valeur maximale

value

nombre

Specifies how much of the task has been completed

Attributs globaux

La balise <progress> prend également en charge les Attributs globaux en HTML.


Attributs de l'événement

La balise <progress> prend également en charge les Attributs de l'événement en HTML.


Retour à l'accueil du site

Par carabde 10 mars 2014

Voir aussi nos tutoriel :

CSS border-bottom

Définit toutes les propriétés de bordure de fond dans une déclaration

la propriété box-shadow

Attache un ou plusieurs ombres portées à la boîte

fonction stripcslashes, stripcslashes

D code une chaîne encodée avec addcslashes