Maison >interface Web >tutoriel HTML >Comment créer une barre de progression en utilisant HTML et CSS

Comment créer une barre de progression en utilisant HTML et CSS

WBOYavant: 2023-09-05 09:09:111537parcourir

Vue d'ensemble

La barre de progression est le composant principal de toute application Web. La progression indique l’achèvement d’un projet ou d’une tâche. Dans ce module, nous allons créer une barre de progression en utilisant HTML et la styliser avec CSS. Nous fournirons également une animation de progression pour la barre de progression. Dans cette tâche, nous animerons la barre de progression à l'aide de @keyframes. Utilisez les propriétés du style d'animation telles que la durée de l'animation, le nom, le timing, etc.

Algorithme

Étape 1 - Créez un passe-partout HTML dans un éditeur de texte.

Étape 2 - Créez un conteneur div parent et définissez le nom de la classe comme barContainer.

Étape 3 - Créez maintenant un autre enfant du div parent actuel et définissez le nom de la classe.

Étape 4 - Créer un enfant qui hérite en cours et qui sera animé.

Étape 5 - Liez la feuille de style à la page Web à l'aide d'une balise de lien dans la balise head de la page.

Étape 6 - Créez un nouveau fichier style.css et stylisez la page, en utilisant la propriété animation pour créer des animations dans la barre de progression.

Étape 7 - La barre de progression a été créée avec succès.

Exemple

Dans cet exemple, nous allons créer une simple barre de progression en utilisant HTML et CSS. Parmi eux, index.html est la page d'accueil, qui est le squelette de la page. Nous venons de créer le squelette du composant. Toutes les parties d'animation et de style sont réalisées dans la section style.css. Le fichier style.css comprend les parties de style et d'animation du composant.

<html>
<head>
   <link rel="stylesheet" href="style.css">
   <title>Progress Bar</title>
   <style>
      * {
         margin: 0;
      }
      .barContainer {
         min-height: 100vh;
         width: 100vw;
         display: flex;
         align-items: center;
      }
      .progress,.progressBar {
         width: 20rem;
         height: 2rem;
         border-radius: 1.2rem;
         margin: auto;
         background-color: rgb(243, 243, 243);
      }
      .progressBar{
         background-color: green;
         animation: backp 3s;
         margin: 0;
         padding: 0;
         width: 80%;
         height: 2rem;
         border-radius: 1rem;
         box-shadow: none;
      }
      span{
         color: white;
         text-align: end;
         display: block;
         padding: 0.5rem;
      }
      @keyframes backp {
         0% {
            width: 0%;
         }
         100%{
            width: 80%;
         }
      }  
   </style>   
</head>
<body>
   <div class="barContainer">
      <div class="progress">
         <div class="progressBar">
            <span> 80% Completed</span>
         </div>
      </div>
   </div>
</body>
</html>

L'image ci-dessous montre la sortie, qui montre une barre de progression qui est chargée lors du chargement de la page, puisque nous utilisons uniquement du CSS, la barre de progression est fixée à 80 % de progression. Par conséquent, cette barre de progression a été créée pour démontrer les applications qui incluent des tâches telles que l'achèvement d'un cours. Ainsi, pour suivre l’avancement des tâches, c’est le moyen idéal de les représenter sous la forme d’une interface utilisateur graphique.

Conclusion

La barre de progression est utilisée dans de nombreuses applications telles que l'installation de mises à jour, le téléchargement de n'importe quelle application, le chargement d'applications et bien d'autres encore. Les barres de progression rendent l'interface utilisateur plus attrayante. Pour exécuter la barre de progression en temps réel, nous ne pouvons pas le faire uniquement en utilisant HTML et CSS, donc pour implémenter la barre de progression dans le projet en temps réel, nous utilisons également le langage de script Javascript qui peut vérifier la connexion Internet et télécharger via le réseau que nous peut La progression de la création de la barre de progression. L'utilisation de HTML et CSS ne peut être utilisée que pour créer des barres de progression statiques. Par conséquent, il est généralement préférable d’utiliser des langages de script tels que javascript pour créer des barres de progression.

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!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Quel est le rôle de l’objet Navigator en JavaScript ?Article suivant：Quel est le rôle de l’objet Navigator en JavaScript ?

Articles Liés

Voir plus