Comment définir le logo dans le chargeur en utilisant CSS ?-tutoriel CSS-php.cn

Comment définir le logo dans le chargeur en utilisant CSS ?

WBOY

Libérer： 2023-09-24 20:17:05

avant

3182 Les gens l'ont consulté

Pour commencer à répondre à cette question, nous devons d'abord créer un "Loader". Toute animation qui informe l'utilisateur ou le visiteur qu'une page est en cours de chargement et qu'elle prendra quelques secondes est appelée un Loader.

La plupart du temps, les chargeurs sont utiles lorsqu'un site Web met trop de temps à récupérer les résultats. Si un site Web particulier ne dispose pas d'un chargeur CSS, les utilisateurs penseront qu'il ne répond pas du tout pendant son chargement.

Par conséquent, l'ajout d'un chargeur CSS à une page Web distraira l'utilisateur ou attendra un certain temps que la page se charge correctement. Plutôt que de donner l'impression que le site ne répond pas, une simple animation montre que le site est toujours en train de récupérer des résultats et que la page sera prête dans quelques secondes.

Vous pouvez utiliser CSS pour ajouter des styles, des animations ou toute autre forme de style pour créer un chargeur.

Exemple

Nous allons maintenant créer la forme de chargeur la plus courante sur Internet en utilisant CSS.

<!DOCTYPE html>
<html>
<head>
   <title>Example of a loader using CSS</title>
   <style>
      h1 {
         color: rgb(0, 128, 111);
      }
      .loader {
         display: block;
         position: absolute;
         width: 15px;
         height: 15px;
         left: calc(50% - 1.25em);
         border-radius: 1.25em;
         transform-origin: 1.25em 2.25em;
         animation: rotateAnimation;
         animation-iteration-count: infinite;
         animation-duration: 1.85s;
      }
      @keyframes rotateAnimation {
         from {
            transform: rotateZ(0deg);
         }
         to {
            transform: rotateZ(360deg);
         }
      }
      .item1 {
         animation-delay: 0.12s;
         background-color: #1b7842;
      }
      .item2 {
         animation-delay: 0.22s;
         background-color: #239b53;
      }
      .item3 {
         animation-delay: 0.32s;
         background-color: #2ecc72;
      }
      .item4 {
         animation-delay: 0.42s;
         background-color: #82e0a0;
      }
      .item5 {
         animation-delay: 0.52s;
         background-color: #d5f5de;
      }
   </style>
</head>
<body>
   <center>
      <h1>Loader in CSS</h1>
      <h4>Example of the most common form of loader in CSS</h4>
      <div>
         <div class="loader item1"></div>
         <div class="loader item2"></div>
         <div class="loader item3"></div>
         <div class="loader item4"></div>
         <div class="loader item5"></div>
      </div>
   </center>
</body>
</html>

Copier après la connexion

Exemple

Il s'agit d'une autre forme de chargeur qui s'anime sur l'axe horizontal.

<!DOCTYPE html>
<html>
<head>
   <title>Example of a loader using CSS</title>
   <style>
      h1 {
         color: rgb(0, 128, 111);
      }
      .loader {
         display: block;
         position: absolute;
         width: 150px;
         height: 15px;
         left: calc(58% - 5.25em);
         transform-origin: 2px 20px;
         animation: rotateAnimation;
         animation-iteration-count: infinite;
         animation-duration: 2.85s;
      }
      @keyframes rotateAnimation {
         from {
            transform: rotateY(55deg);
         }
         to {
            transform: rotateY(360deg);
         }
      }
      .item1 {
         animation-delay: 0.12s;
         background-color: #1b7842;
      }
      .item2 {
         animation-delay: 0.22s;
         background-color: #239b53;
      }
      .item3 {
         animation-delay: 0.32s;
         background-color: #2ecc72;
      }
      .item4 {
         animation-delay: 0.42s;
         background-color: #82e0a0;
      }
      .item5 {
         animation-delay: 0.52s;
         background-color: #d5f5de;
      }
   </style>
</head>
<body>
   <center>
      <h1>Loader in CSS</h1>
      <h4>Example of the most common form of loader in CSS</h4>
      <div>
         <div class="loader item1"></div>
         <div class="loader item2"></div>
         <div class="loader item3"></div>
         <div class="loader item4"></div>
         <div class="loader item5"></div>
      </div>
   </center>
 </body>
</html>

Copier après la connexion

Ajouter un logo dans le chargeur

Maintenant que nous savons comment créer un chargeur en CSS, nous allons maintenant passer à la façon d'ajouter un logo au chargeur que nous venons de créer.

Essayons d'abord de comprendre pourquoi nous pourrions avoir besoin d'ajouter un logo à l'intérieur du chargeur. Un logo est la marque et l'identité d'une marque, qui ajoute une touche personnelle à l'expérience utilisateur. De nos jours, tous les sites Web utilisent des chargeurs de personnalisation qui ont un impact positif sur leur marque à chaque fois qu'un utilisateur accède à leur site Web.

Algorithme

L'algorithme que nous suivrons pour créer un chargeur qui intègre le logo est le suivant -

Étape 1- Pour inclure notre chargeur, nous allons créer un fichier HTML et ajouter un div HTML au corps du fichier.
Étape 2 - Pour animer notre logo et notre chargeur, nous allons écrire un fichier CSS ou l'intégrer à l'aide de balises de style.
Étape 3 - Insérez le logo à l'aide de la balise à l'intérieur de la balise div afin qu'il s'affiche désormais dans la classe de chargement

Vous trouverez ci-dessous les propriétés que nous pouvons utiliser pour le chargeur -

Nous personnaliserons la bordure, la couleur, la hauteur et la largeur en fonction du logo, ce qui améliorera considérablement la cohérence globale et augmentera l'originalité de la marque.
Pour ajouter une animation de changement progressif, nous utiliserons la règle @keyframes en CSS.
Ensuite, pour faire tourner le chargeur, nous utiliserons la propriété CSS Transform.

Nous concevrons la taille de l’image du logo de manière à ce qu’elle soit inférieure ou égale à la taille du chargeur. Nous ajouterons un style d'animation dans le sens opposé pour contrecarrer l'effet de rotation du logo.

Exemple

Vous trouverez ci-dessous un exemple d'ajout d'un chargeur à un site Web en utilisant l'algorithme ci-dessus.

<!DOCTYPE html>
<html lang="en">
<head>
   <style type="text/css">
      .loaderClass {
         border: 12px solid #dcd7d7;
         border-top: 12px solid #04802f;
         border-radius: 50%;
         width: 120px;
         height: 120px;
         animation: SpinLoader 2.5s linear infinite;
      }
      .loaderClass img {
         height: 120px;
         width: 120px;
         border-radius: 50%;
         animation: LogoModify 2.5s linear infinite;
      }
      @keyframes SpinLoader {
         0% {
            transform: rotate(0deg);
         }
         100% {
            transform: rotate(360deg);
         }
      }
      @keyframes LogoModify {
         0% {
            transform: rotate(360deg);
         }
         100% {
            transform: rotate(0deg);
         }
      }
   </style>
</head>
<body>
   <div class="loaderClass">
      <img src="https://img.php.cn/upload/article/000/887/227/169555783454341.jpg" alt="Comment définir le logo dans le chargeur en utilisant CSS ?">
   </div>
</body>
</html>

Copier après la connexion

Conclusion

Dans l'ensemble, définir le logo dans le chargeur à l'aide de CSS est une tâche simple. Tout ce que vous avez à faire est de définir la largeur et la hauteur de votre logo, puis de l'ajouter comme image d'arrière-plan de votre chargeur à l'aide de l'attribut "background-image". Vous pouvez également ajuster sa position à l'aide des propriétés "background-position" ou "margin" et la personnaliser davantage avec d'autres options de style telles que les bordures, l'ombre de la boîte, etc. Avec quelques connaissances de base en CSS, vous pouvez facilement créer un magnifique chargeur avec un logo. temps!

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!