Créer des écrans de chargement avancés en utilisant CSS-tutoriel CSS-php.cn

Créer des écrans de chargement avancés en utilisant CSS

WBOY

Libérer： 2023-09-17 23:13:02

avant

588 Les gens l'ont consulté

使用 CSS 创建高级加载屏幕

Lorsqu'ils parcourent différentes pages d'un site Web, les développeurs doivent ajouter des écrans de chargement au site Web afin que le site Web ait suffisamment de temps pour parcourir les pages Web. Les écrans de chargement sont un moyen efficace pour les utilisateurs d’attendre pendant qu’une page de site Web se charge/s’initialise.

Comment créer un écran de chargement ?

Pour créer un écran de chargement, nous pouvons utiliser HTML et CSS. Tout d’abord, nous allons créer un élément div dans lequel nous donnerons une balise title qui affichera le pourcentage.

Nous utiliserons ensuite les propriétés CSS (telles que border-radius) pour spécifier la hauteur et la largeur et ajouter une animation à l'élément de chargement. Nous utiliserons également l'attribut over-flow pour masquer l'élément afin que nous ne puissions voir que le contenu principal.

Grammaire

Voici la syntaxe de l'attribut overflow -

p {
   overflow: hidden/ visible/ scroll/ auto;
}

Copier après la connexion

Dans la syntaxe ci-dessus, vous pouvez voir que les valeurs utilisées avec l'attribut overflow peuvent être la valeur cachée pour masquer l'élément, la valeur visible pour rendre l'élément visible et l'attribut scroll pour ajouter un curseur lors du masquage de l'élément.

Regardons un exemple pour mieux comprendre les écrans de chargement.

Exemple

Dans le code ci-dessous, nous avons déclaré la balise de titre et déclaré un conteneur div, y avons créé notre conteneur de chargement, puis l'avons rempli de couleur et ajouté une animation. Après cela, nous avons ajouté un deuxième titre dans le conteneur pour afficher le pourcentage et ajouté une fonction d'image clé pour faire pivoter à 360 degrés. Jetons un coup d'œil à la sortie du code.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Advanced Loading Screen</title>
   <style>
      body {
         background-color: #111;
      }
      h2 {
         color: white;
         text-align: center;
         margin: 20px 0;
         font-size: 70px;
      }
      .screen {
         height: 250px;
         margin: auto;
         border-radius: 50%;
         position: relative;
         width: 250px;
         top: 20%;
         border: 4px solid #DDD;
         overflow: hidden;
      }
      @keyframes rotate {
         to {
            transform: rotate(358deg);
         }
      }
      .screen::after {
         content: "";
         position: absolute;
         top: 25%;
         left: -50%;
         height: 300%;
         width: 200%;
         nimation: rotate 10s linear forwards infinite;
         background-color: blue;
         border-radius: 50%;
         box-shadow: 0 3 10px #4CAF50;
         opacity: 0.9;
      }
      h3 {
         color: white;
         font-size: 70px;
         text-align: center;
         position: relative;
         top: 14%;
      }
   </style>
</head>
<body>
   <h2>Loading Screen</h2>
   <div class="screen">
      <h3>50%</h3>
   </div>
</body>
</html>

Copier après la connexion

Vous pouvez voir dans le résultat ci-dessus que nous déclarons d'abord la balise de titre, puis le conteneur où nous ajoutons une couleur qui affiche notre deuxième titre, puis l'animation dans le conteneur. L'animation pivote à 360 degrés au-dessus du titre en pourcentage.

Exemple

Voici un autre exemple de création d'un écran de chargement avancé. Dans l'exemple ci-dessous, nous déclarons un élément div puis lui donnons une classe pour styliser l'élément à l'aide des propriétés CSS. Nous avons ajouté des couleurs noir et rouge à la bordure, y avons ajouté une animation et utilisé la fonction d'images clés pour faire pivoter le conteneur de 360 degrés. Le code ci-dessus montre comment ajouter un écran de chargement à notre page Web.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Example of the advanced loading screen</title>
   <style>
      @keyframes spin {
         100% {
             transform: rotate(359deg);
         }
         0% {
            transform: rotate(0deg);
         }
      }
      .load {
        border-bottom: 14px solid black;
        border-right: 14px solid red;
        border-left: 14px solid red;
        border-top: 14px solid black;
        border-radius: 49%;
        width: 120px;
        animation: spin 3s linear infinite;
        height: 120px;
      }
      @keyframes spin {
         0% {
            transform: rotate(0deg);
         }
         100% {
            transform: rotate(360deg);
         }
      }
   </style>
</head>
<body>
   <div class="load"></div>
</body>
</html>

Copier après la connexion

Dans la sortie, vous pouvez voir les deux couleurs pivotées à 360 degrés, donnant à l'utilisateur l'impression que la page est en cours de chargement. Vous pouvez utiliser l'attribut align pour aligner le chargeur au centre de la page.

REMARQUE - L'attribut keyframe est une propriété CSS qui permet aux développeurs d'animer des éléments HTML sans utiliser JavaScript, et ces images clés spécifient le style qu'aura l'élément.

Les propriétés des images clés spécifient la durée pendant laquelle l'animation doit s'exécuter et les transitions utilisées doivent être fluides et précises. Le pourcentage doit être précisé et le développeur doit s'assurer que l'animation est compatible avec tous les navigateurs.

Conclusion

Les développeurs Web utilisent différents types de styles et d'animations pour créer des écrans de chargement en fonction du projet sur lequel ils travaillent. Rendre l'écran de chargement un peu différent et y consacrer un effort créatif est crucial car les utilisateurs sont souvent distraits par l'apparence de l'écran de chargement et le temps nécessaire pour charger la page. L'objectif principal de ces écrans de chargement est de rendre le site Web interactif et de ne pas ennuyer les utilisateurs lorsque la page prend beaucoup de temps à charger/lancer.

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!