Comment créer une barre de progression en HTML?

Les barres de progression sont utilisées pour déterminer certains jalons lors d'une tâche à un pourcentage. Vous pouvez créer une barre de progression dans qui spécifie la progression de l'achèvement d'une tâche. La valeur de la barre de progression peut être manipulée par JavaScript. Dans cet article, nous verrons comment vous pouvez créer une barre de progression à l'aide de HTML, CSS et JavaScript dans l'ordre suivant:

• Comment créer une barre de progression en HTML?
• Barre de progression: exemple

Commençons.

Comment créer une barre de progression en HTML?

Une barre de progression représente la progression de toute tâche en cours d'exécution. En général, ces barres sont utilisées pour afficher l'état du téléchargement et du téléchargement. Nous pouvons dire que les barres de progression peuvent être utilisées pour décrire l'état de tout ce qui est en cours.

def __init __ (soi):

Pour créer une barre de progression de base en utilisant , les étapes suivantes doivent être effectuées:

• Créez une structure HTML pour votre barre de progression - Le HTML marque spécifie la progression de l'achèvement d'une tâche.

• Ajout de CSS - L'étape suivante consiste à ajouter la couleur d'arrière-plan de la barre de progression ainsi que l'état de progression dans la barre à l'aide de CSS .

#Progress_Status {width: 50% background-color: #ddd} #myprogressBar {width: 1% height: 35px background-color: # 4CAF50 text-align: center line-height: 32px color: black}

• Ajout de JavaScript - La prochaine étape consiste à créer une barre de progression animée dynamique en utilisant fonctions javascript mise à jour et scène .

function update () {var element = document.getElementById ('myprogressBar') var width = 1 var identity = setInterval (scene, 10) function scene () {if (width> = 100) {clearInterval (identity)} else {width ++ element.style.width = largeur + '%'}}}

Maintenant que vous connaissez les différentes étapes pour créer une barre de progression, passons à autre chose et jetons un œil à l'exemple complet d'une barre de progression.

Barre de progression: exemple

Une fois que vous avez terminé les différentes étapes de création d'une barre de progression, il est temps de lier le HTML, le CSS et Éléments JavaScript . L'exemple suivant montre le code complet de la barre de progression reliant les éléments ci-dessus HTML, CSS et JavaScript Codes:

#Progress_Status {width: 50% background-color: #ddd} #myprogressBar {width: 2% height: 20px background-color: # 4CAF50}
Exemple de barre de progression utilisant JavaScript
 
Statut de téléchargement d'un fichier:
  
Démarrer le téléchargement function update () {var element = document.getElementById ('myprogressBar') var width = 1 var identity = setInterval (scene, 10) function scene () {if (width> = 100) {clearInterval (identity)} else {width ++ element.style.width = width + '%'}}}

Production:

Avec cela, nous sommes arrivés à la fin de notre article. J'espère que vous avez compris les différentes étapes nécessaires pour créer une barre de progression.

Découvrez notre qui vient avec une formation en direct animée par un instructeur et une expérience de projet réelle. Cette formation vous permet de maîtriser les compétences nécessaires pour travailler avec les technologies Web back-end et front-end. Il comprend une formation sur le développement Web, jQuery, Angular, NodeJS, ExpressJS et MongoDB.

Vous avez une question pour nous? Veuillez le mentionner dans la section commentaires de ce blog et nous vous recontacterons.