Comment implémenter un effet de chargement simple avec CSS-Questions et réponses frontales-php.cn

Comment implémenter un effet de chargement simple avec CSS

PHPz

Libérer： 2023-04-26 16:16:14

original

3475 Les gens l'ont consulté

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>

Copier après la connexion

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);
  }
}

Copier après la connexion

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;
}

Copier après la connexion

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);
}

Copier après la connexion

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);
}

Copier après la connexion

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>

Copier après la connexion

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);
  }
}

Copier après la connexion

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;
}

Copier après la connexion

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!