Comment créer un anneau de chargement animé en utilisant HTML et CSS ?

Vue d'ensemble

Un chargeur est un composant Web utilisé par presque toutes les applications Web. Pour créer l'anneau de chargement, nous devons avoir des connaissances préalables sur les feuilles de style en cascade (CSS), car CSS implique la partie style et animation de l'anneau de chargement. Étant donné que le composant de chargement est chargé avant que le contenu original ne soit chargé dans la page Web. Les principales propriétés de style utilisées pour créer cette fonctionnalité sont les animations, les transitions et les images clés. Ces trois propriétés CSS transformeront une simple boucle de chargement animée statique en une boucle de chargement animée.

Algorithme

Étape 1 - Créez un fichier HTML dans le dossier et ouvrez-le à l'aide d'un éditeur de texte. Ajoutez un passe-partout HTML aux fichiers HTML.

Étape 2 − Créez un conteneur div parent HTML dans la balise body du document HTML avec un nom de classe "loading".

<div class="loading"></div>

Étape 3 −Créez un conteneur div enfant, qui est l'anneau de chargement principal avec un nom de classe "Loader".

<div class="loader"></div>

Étape 4−Créez une balise p contenant le texte "Chargement".

<p>Loading ....</p>

Étape 5 − Créez maintenant un fichier style.css et liez le fichier au document HTML.

<link rel="stylesheet" href="style.css">

Étape 6 − Maintenant, stylisez l'élément HTML et faites sonner le chargeur dans la page Web.

body {
   margin: 0;
   width: 100%;
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
}

p {
   font-family: 'Segoe UI';
}

Étape 7 − Ciblez la classe de chargement et créez une bordure en utilisant le rayon de la bordure pour créer une structure semblable à un cadre en anneau.

.loader {
   border: 10px solid #d6d6d6;
   border-radius: 50%;
   border-top: 10px solid #5bdb34;
   width: 50px;
   height: 50px;
}

Étape 8 − Ajoutez l'attribut d'animation à l'élément de chargement, avec le nom de l'animation "lring" et incluant la durée de l'animation et le nombre d'itérations.

.loader {
   border: 10px solid #d6d6d6;
   border-radius: 50%;
   border-top: 10px solid #5bdb34;
   width: 50px;
   height: 50px;
   animation: lring 1s linear infinite;
}

Étape 9 − Créez maintenant les propriétés d'image clé, positionnez l'animation ci-dessus et définissez l'animation sur l'élément.

@keyframes lring {
   0% {
      transform: rotate(0deg);
   }
   
   100% {
      transform: rotate(360deg);
   }
}

Étape 10 − L'anneau de chargement animé a été créé avec succès.

Exemple

Dans cet exemple, nous créons un composant fonctionnel de boucle de chargement animé en utilisant de simples propriétés d'animation HTML et CSS. Pour y parvenir, nous avons créé deux fichiers, le premier fichier est index.html qui est la mise en page ou le cadre de l'anneau de chargement et l'autre fichier est le fichier style.css qui est le style et le fonctionnement de l'anneau de chargement.

   
   <link rel="stylesheet" href="style.css">
   


   

      <div class="loader"></div>
      <p>Loading ....</p>
   

Conclusion

Les fonctionnalités ci-dessus sont disponibles pour toutes les applications Web ou mobiles. Puisque ce qui est créé ci-dessus n'est qu'un composant, nous pouvons intégrer ce composant fonctionnel dans une application active en utilisant l'API pour obtenir des données ou des données locales. Ainsi, lorsque les données réseau ne sont pas encore chargées sur notre page Web, nous pouvons afficher le chargement. animation à l'écran Boucle Une fois les données chargées, nous remplaçons la boucle de chargement par le contenu du site. Nous pouvons également créer des charges animées de différents designs.

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!