Tutoriel CSS pour créer des filateurs et des animations de chargement

Il existe trois façons de créer un rotateur de chargement CSS: 1. Utilisez le rotateur de base des frontières pour obtenir des animations simples via HTML et CSS; 2. Utilisez un rotateur personnalisé de plusieurs points pour atteindre l'effet de saut à travers différents temps de retard; 3. Ajoutez un rotateur dans le bouton et basculez les classes via JavaScript pour afficher l'état de chargement. Chaque approche souligne l'importance des détails de conception tels que la couleur, la taille, l'accessibilité et l'optimisation des performances pour améliorer l'expérience utilisateur.

La création de filateurs de chargement avec CSS est un moyen simple d'améliorer l'expérience utilisateur pendant que le contenu se charge. Vous n'avez pas besoin de JavaScript pour des animations simples - juste HTML et CSS. Vous trouverez ci-dessous des méthodes pratiques pour créer des filateurs de base et personnalisés.

Spinner de base utilisant des frontières

L'un des moyens les plus simples de créer un spinner est d'utiliser un élément bordé et de le faire tourner avec l'animation CSS.

HTML:

 <div class = "Spinner"> </div>

CSS:

 .Spinner {
  Largeur: 40px;
  hauteur: 40px;
  Border: 4px solide #ccc;
  Border-top-Color: # 333;
  Border-Radius: 50%;
  Animation: Spin 1s linéaire infini;
}

@keyframes spin {
  à {transform: rotation (360Deg); }
}

• La border crée la forme de l'anneau.
• border-top-color donne l'effet de "chargement" avec une couleur contrastée.
• Le cadre de clé spin tourne l'infini l'élément.

Cette méthode fonctionne bien pour les petits chargeurs subtils.

Spinner personnalisé avec plusieurs points

Si vous voulez quelque chose de plus visuel qu'un cercle rotatif, envisagez d'animer plusieurs points qui apparaissent l'un après l'autre.

HTML:

 <div class = "dot-spinner">
  <div class = "dot"> </ div>
  <div class = "dot"> </ div>
  <div class = "dot"> </ div>
</div>

CSS:

 .DOT-SPINNER {
  Affichage: flex;
  Écart: 5px;
}

.dot {
  Largeur: 8px;
  hauteur: 8px;
  Color en arrière-plan: # 333;
  Border-Radius: 50%;
  Animation: Bounce 1.2s Infinite Facit-in-Out;
}

.DOT: Nth-Child (1) {Animation-Delay: -0.32S; }
.DOT: Nth-Child (2) {Animation-Delay: -0.16S; }

@keyframes rebond {
  0%, 80%, 100% {transform: échelle (0); }
  40% {transform: échelle (1); }
}

• Chaque DOT s'évalue dans et à l'extérieur à des moments légèrement différents.
• Cette animation échelonnée donne un effet pulsé ou rebondissant.
• Vous pouvez modifier le nombre de points ou ajuster le timing pour différents styles.

Ce type de spinner est idéal pour les interfaces utilisateurs modernes où un mouvement subtil ajoute de la personnalité.

Ajout d'animation aux boutons

Parfois, vous voulez montrer un spinner à l'intérieur d'un bouton lorsqu'une action est traitée.

HTML:

 <Button class = "Loading-Btn">
  <span class = "btn-text"> soumettre </span>
  <span class = "spinner"> </span>
</ bouton>

CSS (partiel):

 .loading-btn .spinner {
  Affichage: aucun;
  Largeur: 16px;
  hauteur: 16px;
  Border: 2px solide #fff;
  Color de bordure: transparent;
  Border-Radius: 50%;
  Animation: Spin 0.8S linéaire infini;
  marge-gauche: 8px;
}

.loading-btn.loading .spinner {
  Affichage: bloc en ligne;
}

.loading-btn.loading .btn-text {
  Opacité: 0;
}

• Lorsque le bouton a une classe loading , le spinner apparaît et le texte s'estompe.
• Vous basculez la classe à l'aide de JavaScript lors du déclenchement d'une action asynchrone.

Cette approche maintient votre interface réactive et donne des commentaires lors d'actions comme la soumission de formulaire.

Conseils pour la personnalisation

Voici quelques conseils rapides pour faire mieux fonctionner vos filateurs:

• Utilisez des couleurs sémantiques : correspondez à la couleur du spinner à votre thème ou marque.
• Gardez-le petit : les filateurs ne doivent pas dominer l'écran à moins que cela ne soit nécessaire.
• Considérez l'accessibilité : ajoutez des attributs Aria si nécessaire ( aria-busy , role="status" ).
• Optimiser les performances : Évitez les animations sur complices qui peuvent ralentir le rendu.

Vous pouvez mélanger ces techniques ou les superposer en fonction des besoins de votre projet.

C'est essentiellement la façon dont vous créez et personnalisez les filateurs avec seulement CSS. Ce n'est pas compliqué, mais obtenir les bons détails fait une différence dans la façon dont votre interface est fluide et professionnelle.

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!