OUJOOD.COM
Définition et utilisation Balise progress
LES BALISES HTMLPour 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
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