Création d’une animation de chargement simple à l’aide de CSS

Les animations sont un excellent moyen d’améliorer l’expérience utilisateur en rendant les interfaces plus dynamiques et réactives. Un cas d’utilisation quotidien est un indicateur de chargement informant les utilisateurs qu’un processus se produit en arrière-plan. Dans cet article, nous explorerons comment animer une série de points (.) en utilisant CSS images cléscréant une animation d’attente simple mais efficace.

Le @keyframes La règle dans CSS définit les étapes d’une animation en spécifiant comment les propriétés d’un élément devraient changer avec le temps. Il vous permet de créer des transitions lisses en définissant des points intermédiaires (images clés) entre le début (0%) et fin (100%) états d’une animation. Chaque image clé représente un pourcentage de la durée de l’animation, où différentes propriétés CSS peuvent être modifiées.

Par exemple, une animation qui fait avancer un élément peut être définie avec @keyframesdéfinir différent transform valeurs à 0%, 50%et 100%. Lorsqu’il est appliqué à un élément en utilisant le animation Propriété, il passera en douceur à travers ces images clés, créant un effet de mouvement fluide. Cette méthode est largement utilisée pour créer des indicateurs de chargement, des effets de survol et des éléments d’interface utilisateur plus dynamiques sans s’appuyer sur JavaScript.

Le concept de chargement

Voici un exemple:

Chargement...

L’objectif est de créer une petite animation où trois points apparaissent et disparaissent dans une boucle, simulant un processus en cours. Cet effet peut être utilisé dans divers éléments d’interface utilisateur, tels que les boutons, les indicateurs d’état ou les écrans de chargement.

Voici le code:

<span class="loading-container">
    Loading<span class="dots"><span>.</span><span>.</span><span>.</span></span>
</span>

Implémentation de l’animation avec CSS

Pour réaliser cet effet, nous utilisons Animations CSS et @keyframes Pour contrôler l’opacité des points. Voici comment cela fonctionne:

.loading-container {
    position: relative;
    display: inline-block;
    font-size: 16px;
}

.loading-container .dots span {
    opacity: 0;
    animation: loadingAnimation 1.5s infinite;
}

.loading-container .dots span:nth-child(1) {
    animation-delay: 0s;
}

.loading-container .dots span:nth-child(2) {
    animation-delay: 0.3s;
}

.loading-container .dots span:nth-child(3) {
    animation-delay: 0.6s;
}

@keyframes loadingAnimation {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

Comment ça marche

1. Style de conteneur (.loading-container):
   • Le conteneur est défini sur inline-block Il s’adapte donc parfaitement à un texte ou à d’autres éléments.
   • position: relative; s’assure que le positionnement de l’animation reste contrôlé.
2. Style de point (.dots span):
   • Chaque point est défini sur opacity: 0 Par défaut, ils sont donc invisibles au début.
   • Le animation la propriété s’applique loadingAnimation sur 1.5sboucle indéfiniment.
3. Retards échelonnés (nth-child):
   • Chaque point a un retard différent (0s, 0.3s, 0.6s).
   • Cet effet échelonné garantit que les points apparaissent l’un après l’autre dans une séquence de boucle.
4. Définition des images clés (@keyframes loadingAnimation):
   • À 0%le point est invisible.
   • À 50%le point est entièrement visible.
   • À 100%le point s’estompe à nouveau.
   • Ce cycle se répète, créant l’effet des points en mouvement.

Le résultat

Animations CSS uniquement créerEA LECT LETHERE ET VISMUNELLEMENT ENFAISON DE CHARGEMENT SANS BESOIN DE JavaScript. Il peut être appliqué n’importe où dans une interface utilisateur où une indication d’attente est nécessaire.

Pourquoi utiliser cette approche?

• Impact de la performance minimale: Les animations CSS pures sont optimisées pour des performances lisses.
• Aucun javascript requis: Réduit la complexité et améliore la maintenabilité.
• Facilement personnalisable: Vous pouvez modifier la vitesse d’animation, la couleur ou ajouter plus de points pour un effet différent.

C’est un excellent moyen d’ajouter une animation subtile mais efficace à toute interface Web, améliorant l’expérience utilisateur en indiquant clairement les processus d’arrière-plan.