Partager

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

Somaire

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 :

Sélectionner 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
  • SCREEBER - Logiciel de copywriting

    SCREEBER - Logiciel de copywriting
    Augmentez vos résultats en rejoignant les 1600 entrepreneurs qui utilisent Screeber®, le seul logiciel de Copywriting (en français) qui rédige avec vous des textes de vente qui convertissent


    HTML5, CSS3, JavaScript pour débutants Tome 1 HTML5, CSS3, JavaScript pour débutants Tome 1
    Premier tome d\'une série vidéo dédiée à l\'apprentissage des langages HTML, CSS et JavaScript.

    Regarder aussi nos cours :

    position

    Indique le type de positionnement d'un élément

    fonction sha1_fille

    Calcule le sha1 d'un fichier

    Balise datalist

    Spécifie une liste de options prédéfinies pour les contrôles d'entrée