Avec l'aide de HTML et CSS, les développeurs peuvent présenter leur travail en créant une barre de progrès. Fondamentalement, il est utilisé pour voir la progression du projet de développement actuel ou de tout élément. En outre, plusieurs méthodes sont disponibles en HTML pour créer une barre de progression à l'aide de la balise «», qui est utilisée pour afficher un indicateur montrant la progression de l'achèvement d'une tâche. De plus, vous pouvez faire une barre de progression à travers plusieurs propriétés CSS.

Ce message expliquera:

• Qu'est-ce qu'une barre de progrès?
• Méthode 1: Comment créer une barre de progression en utilisant une balise HTML?
• Méthode 2: Comment créer une barre de progression en utilisant les propriétés CSS?

Qu'est-ce qu'une barre de progrès?

Une barre de progression est utilisée pour représenter un élément de contrôle graphique utilisé pour conceptualiser l'état d'une opération informatique améliorée.

Méthode 1: Comment créer une barre de progression en utilisant une balise HTML?

Pour faire une barre de progression à l'aide de HTML, regardez les instructions ci-dessous.

Étape 1: Créez un conteneur div
Tout d'abord, créez un conteneur Div à l'aide du «"Tag et spécifiez une classe avec un nom selon votre choix.

Étape 2: Ajouter un en-tête
Insérez une rubrique avec l'aide du «

”Tag et ajoutez du texte pour la tête entre la balise de capture.

Étape 3: Créer une barre de progression
Maintenant, ajoutez un "”Tag pour créer la barre de progression. Spécifiez également un «valeur«De la barre de progrès en cours, et le« «max»L'attribut est utilisé pour régler la taille maximale de la barre de progression:

En cours

On peut observer que nous avons créé avec succès une barre de progression:

Méthode 2: Comment créer une barre de progression en utilisant les propriétés CSS?

Pour créer une barre de progression avec CSS, essayez la procédure mentionnée.

Étape 1: Faites un conteneur div
Tout d'abord, faites un conteneur div en utilisant le «" étiqueter. Ajoutez également une classe avec un nom spécifique à l'intérieur de la balise d'ouverture.

Étape 2: Créez un autre conteneur div
Ensuite, créez un autre conteneur entre le premier conteneur DIV:

Étape 3: Accès à la classe de conteneurs Div
Accédez à la classe DIV Container à l'aide du sélecteur de points et du nom de classe comme «.Progressbar-div»Et appliquez les propriétés mentionnées:

.ProgressBar-div
Border-Radius: 10px;
rembourrage: 3px;
marge: 50px;
Color en arrière-plan: RVB (12, 4, 2);

Ici:

• "rayon frontalier»La propriété définit le rayon du bord de bordure extérieur du coin élément. Les utilisateurs peuvent définir un seul rayon pour faire des coins circulaires.
• "rembourrage»Spécifie l'espace à l'intérieur de la bordure définie autour de l'élément.
• "marge»La propriété spécifie un espace en dehors de la frontière définie.
• "Couleur de l'arrière plan"Est utilisé pour définir une couleur pour l'arrière-plan de l'élément.

Étape 4: Faire une barre de progression
Accédez au conteneur DIV intérieur et stylisez-le comme suit:

.ProgressBar-div> div
Color en arrière-plan: RVB (210, 233, 5);
Largeur: 50%;
hauteur: 30px;
Border-Radius: 12px;

Dans le bloc de code ci-dessus:

• Le "largeur»La propriété est utilisée pour régler la taille de l'élément horizontalement.
• Suivant, "hauteur”Est ​​utilisé pour allouer la hauteur de l'élément.
• "rayon frontalier»Propriété utilisée pour créer les coins arrondis.

Sortir

Il s'agissait de créer la barre de progression avec HTML et CSS.

Conclusion

Pour créer une barre de progression avec le HTML et le CSS, créez d'abord un conteneur div imbriqué et ajoutez le «" élément. Ensuite, style le premier conteneur div en appliquant les propriétés CSS, y compris «rayon frontalier","rembourrage","marge","arrière-plan", et "couleur". Ensuite, style le div intérieur pour faire une barre de progrès en utilisant le «largeur","hauteur", et "rayon frontalier". Cet article a expliqué la fabrication de la barre de progression avec HTML et CSS.