Comment implémenter un effet de chargement simple avec CSS

Dans le développement front-end, le chargement est une fonction très courante. Lorsque les données de la page Web sont chargées, nous espérons donner à l'utilisateur un retour visuel en attendant d'améliorer l'expérience utilisateur. Dans cet article, nous allons implémenter un simple effet de chargement via CSS.

1. Utilisez l'animation d'animation pour implémenter le chargement

Animation est un nouveau module en CSS3, qui peut être utilisé pour créer des effets d'animation très complexes. Ici, nous utilisons l'animation pour créer un effet de chargement.

Ajoutez d'abord un conteneur pour l'effet de chargement dans le HTML :

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

Ensuite, définissez une animation d'image clé en CSS pour faire pivoter le "cercle".

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

Stylisez ensuite la classe .loading-circle pour en faire un cercle et utilisez l'animation définie ci-dessus à l'intérieur.

.loading-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #333;
  margin: 0 10px;
  animation: rotate 1.5s ease-in-out infinite;
}

Enfin, stylisez le conteneur en .css-loading pour qu'il soit centré sur la page et que le "cercle" soit positionné et dimensionné de manière appropriée.

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading-circle:nth-child(1) {
  transform: translateY(-30px);
}
.loading-circle:nth-child(2) {
  transform: translateY(30px);
}

Le code d'implémentation complet est le suivant :

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

.loading-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #333;
  margin: 0 10px;
  animation: rotate 1.5s ease-in-out infinite;
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading-circle:nth-child(1) {
  transform: translateY(-30px);
}
.loading-circle:nth-child(2) {
  transform: translateY(30px);
}

2. Utilisez Transition pour implémenter le chargement

En plus de l'animation, nous pouvons également utiliser Transition en CSS pour obtenir l'effet de chargement.

Nous ajoutons également un conteneur en HTML comme zone d'affichage de Loading :

<div class="loading-2">
  <div class="loading-circle-2"></div>
  <div class="loading-circle-2"></div>
  <div class="loading-circle-2"></div>
</div>

En CSS, nous définissons l'état initial et l'état final de la classe .loading-circle-2, et utilisons Transition pour obtenir une fluidité entre les états transition.

.loading-circle-2 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #333;
  margin: 0 10px;
  transform: scale(0);
  transition: transform 0.5s ease 0.2s;
}

.loading-2 .loading-circle-2:nth-child(1) {
  animation: delay 0.2s linear infinite;
}
.loading-2 .loading-circle-2:nth-child(2) {
  animation: delay 0.3s linear infinite;
}
.loading-2 .loading-circle-2:nth-child(3) {
  animation: delay 0.4s linear infinite;
}

@keyframes delay {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

Enfin, nous stylisons l'élément .loading-2 pour qu'il soit centré sur la page.

Le code d'implémentation complet est le suivant :

.loading-circle-2 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #333;
  margin: 0 10px;
  transform: scale(0);
  transition: transform 0.5s ease 0.2s;
}

.loading-2 .loading-circle-2:nth-child(1) {
  animation: delay 0.2s linear infinite;
}
.loading-2 .loading-circle-2:nth-child(2) {
  animation: delay 0.3s linear infinite;
}
.loading-2 .loading-circle-2:nth-child(3) {
  animation: delay 0.4s linear infinite;
}

@keyframes delay {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

.loading-2 {
  display: flex;
  justify-content: center;
  align-items: center;
}

3. Résumé

Cet article montre comment utiliser CSS pour obtenir l'effet de chargement via deux méthodes différentes. Bien que l'animation soit relativement complexe, elle peut créer des effets d'animation très riches et diversifiés. La transition est plus concise et facile à comprendre, et permet de réaliser des animations simples.

En général, utiliser CSS pour implémenter le chargement est un moyen relativement simple, qui peut améliorer efficacement l'expérience utilisateur. Bien entendu, lors du développement réel, nous devrons peut-être également procéder à quelques ajustements et optimiser le style en fonction des besoins réels du projet.

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!