Pour créer une barre de progression en HTML, vous pouvez utiliser l’élément HTML `
L’élément `progress` représente l’avancement d’une tâche, comme le téléchargement d’un fichier ou la conclusion d’un questionnaire d’enquête.
Il contient deux attributs principaux: `value` et `max`.
- `value`: représente la valeur courante de la tâche (par exemple, en avance sur la tâche).
- `max`: représente la valeur maximale que la tâche nécessite (par exemple, combien de temps est nécessaire pour terminer la tâche entièrement).
Voici un exemple d’une barre de progression en HTML :
```
```
Dans cet exemple, la barre de progression est définie à 70% de la tâche terminée sur un maximum de 100% possible.
Notez cependant que l’élément `progress` est stylisé différemment dans différents navigateurs web. Vous aurez besoin d’utiliser CSS pour la personnaliser à votre goût. Par exemple:
```
progress {
/* Réinitialiser l’apparence pour toutes les navigateurs */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
progress::-webkit-progress-bar {
background-color: #eee;
border-radius: 10px;
}
progress::-webkit-progress-value {
background: #3a7bdb;
border-radius: 10px;
}
progress::-moz-progress-bar {
background: #3a7bdb;
border-radius: 10px;
}
```
Ici, nous avons défini une barre de progression de 250 pixels de large et 20 pixels de haut, avec un fond gris (#eee) et une barre de progression bleue (#3a7bdb). Les arrondis sur la barre de progression ont également été définis à 10 pixels pour donner un aspect plus doux.
N’oubliez pas que le support de CSS varie également entre les navigateurs, donc il est toujours une bonne idée de tester votre code dans plusieurs navigateurs pour s’assurer qu’il s’affiche comme prévu.
