Comment définir la couleur d'une barre de progression en utilisant HTML et CSS ?

Dans le développement de sites Web, la barre de progression est une partie importante du site Web. La barre de progression montre la progression du processus. Avec l'aide de celui-ci, les utilisateurs peuvent voir l'état du travail effectué sur le site Web, y compris les temps de chargement, les téléchargements de fichiers, les téléchargements de fichiers et d'autres tâches similaires. Par défaut, il est gris. Cependant, pour que les barres de progression se démarquent et soient visuellement attrayantes, vous pouvez utiliser HTML et CSS pour changer leur couleur.

Qu'est-ce qu'une barre de progression ?

La barre de progression est utilisée pour montrer la progression de la tâche. Il s'agit d'un élément d'interface utilisateur graphique. Il s'agit essentiellement d'une barre horizontale qui se remplit progressivement au fur et à mesure de la progression de la tâche, accompagnée d'un pourcentage ou d'un autre indicateur d'achèvement. Les barres de progression sont utilisées dans les applications Web pour fournir aux utilisateurs des informations sur le temps qu'il faudra pour terminer un processus tel qu'un téléchargement de fichier, un téléchargement de fichier ou une installation de logiciel.

Créer une barre de progression en utilisant HTML

Des barres de progression peuvent être créées à l'aide du langage de balisage HTML. En HTML5, vous pouvez créer une barre de progression à l'aide de l'élément Voici un exemple de création d'une barre de progression de base en utilisant HTML :

<progress value="30" max="100"></progress>

Dans l'exemple ci-dessus, nous avons créé une barre de progression et affiché la barre de progression comme étant terminée à 30 %, en définissant l'attribut value sur 30. L'attribut max est défini sur 100.

Exemple 1

Exemple 1

Voici un exemple de code complet pour créer une barre de progression de base en utilisant HTML

   
Create a basic progress bar Using HTML
   <progress value="30" max="100"></progress>
   

Définir le style de la barre de progression

Après avoir créé la barre de progression, nous pouvons la styliser en utilisant CSS et définir sa couleur. CSS fournit aux développeurs le pseudo-élément ::-webkit-progress-value pour définir la couleur de la barre de progression. Vous trouverez ci-dessous un exemple d'application de styles CSS sur une barre de progression.

progress {
   width: 300px;
   height : 25px;
   border: 2px solid gray;
}
progress::-webkit-progress-bar {
   background-color: green;
}
progress::-webkit-progress-value {
   background-color: red;
}

Nous définissons la couleur d'arrière-plan des pseudo-éléments ::-webkit-progress-bar et ::-webkit-progress-value. En même temps, nous définissons la hauteur et la largeur de la barre de progression en ciblant l'élément

Exemple 2

Voici un exemple de code complet pour créer une barre de progression en utilisant HTML et CSS.

   



   
Create progress bar Using HTML and CSS
   <progress value="30" max="100"></progress>

Ajouter du texte à la barre de progression

Fournissez des informations supplémentaires à l'utilisateur en ajoutant du texte à la barre de progression. Pour ce faire, nous créons deux couches en utilisant le pseudo-élément ::-webkit-progress-bar et le pseudo-élément ::-webkit-progress-value, où la couche de valeur de progression est au-dessus de la couche de barre de progression. Par exemple -

progress {
   position: absolute;
   height: 24px;
   width: 300px;
   border: 1px solid #fff;
}
progress::before {
   content: "Loading: " attr(value) "%";
   position: absolute;
   width: 100%;
   text-align: center;
   font-size: 18px;
   color: blue;
}
progress::-webkit-progress-bar {
   background-color: orange;
}
progress::-webkit-progress-value {
   background-color: red;
}

Dans l'exemple ci-dessus, nous avons ajouté un pseudo-élément ::before à l'élément . Il affichera la valeur de progression sous forme de texte en haut de la barre de progression. Nous avons également corrigé le texte au centre de la barre de progression et défini sa taille de police sur 18 px.

Exemple 3

Voici l'exemple de code complet pour ajouter du texte à une barre de progression.

   



   
Create progress with additional information bar Using CSS
   <progress value="30" max="100"></progress>

Conclusion

Ici, nous avons expliqué en quoi les barres de progression sont un outil précieux dans le développement Web. Il fournit aux utilisateurs un retour d'information sur l'avancement des travaux sur le site Internet. Il peut également être personnalisé pour s’adapter à la conception globale du site Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!