Une pulsation CSS lisible dans CodePen, sans clignotement ni JavaScript

Une icône de statut CSS animée doit transmettre une information en une seconde : un utilisateur est disponible, un serveur répond lentement ou une tâche progresse. Pour tester le rendu, partez d’un élément HTML simple, puis séparez clairement la forme, l’état et l’animation. CodePen permet de modifier les valeurs et d’observer immédiatement le résultat, sans JavaScript.

Choisir le bon indicateur selon l’information à afficher

Le choix entre un point circulaire, une icône de serveur et une barre animée dépend de la nature du statut. Un point répond à une question courte ou binaire : connecté, absent ou indisponible. Une barre convient mieux à une valeur mesurable, comme un niveau de charge ou une progression. Dans tous les cas, l’animation ne doit pas masquer l’information.

Le point circulaire pour la présence

Un indicateur de présence peut être un simple élément span doté d’une classe d’état : <span class="status status--online"></span>. Avec une largeur et une hauteur de 15px, un border-radius: 50% et display: inline-block, il devient un cercle. Les quatre variantes fréquentes sont online, invisible, idle et offline.

Réservez de préférence le vert à la disponibilité, une teinte neutre à l’absence et une couleur d’attention à l’inactivité. Ne faites toutefois pas reposer le message sur la couleur seule. Un libellé ou une information complémentaire permet de comprendre l’état même lorsque les couleurs sont difficiles à distinguer.

Le statut serveur pour une décision rapide

Dans un tableau de bord de monitoring, les états up, slow et down doivent rester stables et faciles à comparer. Un point de 10px peut suffire, mais il gagne à être accompagné d’un texte tel que « opérationnel », « réponse lente » ou « indisponible ». Le texte donne le sens, tandis que le point fournit un repère visuel rapide.

L’attribut HTML type peut servir à cibler les variantes, mais une classe explicite est souvent plus lisible dans une feuille CSS : .server--slow ou .server--down. Cette organisation facilite aussi la mise à jour de l’état lorsque l’interface reçoit une nouvelle information.

Construire une pulsation CSS sans ajouter de JavaScript

Une pulsation fiable ne fait pas clignoter le point principal. Elle crée plutôt un halo qui s’agrandit derrière lui, puis devient transparent. L’élément central conserve ainsi une présence visuelle constante, tandis que l’animation signale l’activité sans produire de rupture permanente dans l’interface.

Le rôle du pseudo-élément

Appliquez position: relative à l’indicateur, puis créez un ::after placé en position: absolute. Ce pseudo-élément reprend la couleur du point, occupe toute sa surface et reçoit lui aussi un rayon de bordure de 50 %. Il forme une seconde couche sans nécessiter de balise HTML supplémentaire.

Pour éviter qu’il ne décale la mise en page, positionnez-le avec des valeurs de décalage nulles et superposez-le à l’icône. Le point principal reste alors indépendant du halo. Vous pouvez utiliser ::before selon l’organisation de votre composant, mais une seule couche animée suffit pour créer l’effet.

Des keyframes fondées sur scale et opacity

Déclarez une animation pulse avec @keyframes. Au départ, le halo peut utiliser transform: scale(0.5) et une opacité visible. À la fin, il atteint scale(1.5) tandis que son opacity tombe à zéro. La combinaison de scale et opacity donne l’impression d’une onde qui se propage autour du point.

Une durée de 1.5s fournit un rythme doux pour une présence en ligne. La propriété animation-iteration-count: infinite répète l’effet, tandis que animation-timing-function: ease-in adoucit sa progression. Ces valeurs peuvent être ajustées dans CodePen pour comparer une pulsation plus courte, plus lente ou plus discrète.

Évitez d’animer la largeur, la hauteur ou les marges d’un cercle pour produire cet effet. Les transformations sont mieux adaptées à une couche décorative : le composant garde ses dimensions de mise en page, ce qui limite les déplacements visuels autour de lui. Si plusieurs statuts sont affichés dans une même liste, vous pouvez aussi décaler l’animation pour éviter une pulsation collective trop mécanique.

Rendre les états explicites, accessibles et faciles à maintenir

Une animation CSS-only règle la présentation, pas la logique métier. Lorsqu’un serveur change d’état ou qu’un utilisateur se connecte, l’application doit mettre à jour la classe, l’attribut ou le contenu textuel concerné. Séparer cette mise à jour de l’animation rend le composant réutilisable dans un profil, une messagerie ou une interface de supervision.

Une classe par état, une base commune

Créez d’abord une classe générique qui porte les dimensions, la forme et le positionnement : .status. Ajoutez ensuite des modificateurs tels que .status--online, .status--idle et .status--offline. La couleur peut varier dans chaque modificateur, tandis que le halo animé reste attaché uniquement à .status--online ou à l’état qui nécessite une attention particulière.

Cette organisation évite de recopier les mêmes règles CSS pour chaque variante. Elle sépare la base visuelle, les couleurs d’état et le comportement animé. Vous pouvez ainsi modifier la taille du composant sans réécrire les styles propres à online, idle ou offline.

Ne pas confondre animation et information

Un point rouge seul n’est pas assez explicite pour tout le monde, notamment en cas de déficience de perception des couleurs, de faible contraste ou de lecture rapide. Associez-le à un libellé visible, par exemple « Serveur : indisponible », ou à un texte destiné aux technologies d’assistance lorsque le contexte visuel le permet.

Dans une ligne de serveur, le texte reste la donnée principale. Le point et son animation renforcent la lecture, mais ne doivent pas porter seuls l’état. Cette règle vaut aussi pour les statuts de présence : les termes online, invisible, idle et offline doivent pouvoir être compris sans interpréter une couleur ou un mouvement.

Prévoyez aussi une règle @media (prefers-reduced-motion: reduce). Elle peut désactiver l’animation ou supprimer la répétition infinie. Un statut doit rester compréhensible lorsque le mouvement est réduit : conservez donc la couleur, le contraste, le texte et la forme. La pulsation reste un signal complémentaire, jamais l’unique canal d’information.

Animer une barre de statut et tester le rendu dans CodePen

Une barre est préférable lorsqu’un état possède une intensité. Contrairement à une icône de statut, elle affiche une proportion : 80 %, 45 % ou 20 % sont immédiatement comparables. Son animation peut se déclencher au chargement en faisant évoluer width depuis zéro jusqu’à la valeur cible, puis en conservant l’état final avec animation-fill-mode: forwards.

Créer un remplissage progressif lisible

Placez un élément de remplissage dans un conteneur à fond neutre. La largeur cible peut être définie directement ou fournie par une classe de niveau. Pour un rendu moins plat, un dégradé linéaire peut donner du volume, mais le contraste entre le remplissage et le fond doit rester net.

Une courbe cubic-bezier(.35,.95,.67,.99) produit une arrivée souple. Utilisez-la toutefois avec retenue dans un écran de monitoring, où une animation trop spectaculaire détourne l’attention des valeurs. La largeur et la valeur textuelle doivent rester cohérentes afin que la progression soit comprise sans attendre la fin du mouvement.

Pour observer des variantes fonctionnelles, la démo Animated CSS Status Indicators présente plusieurs états de présence. Pour les cas serveur, la démo Server status animated icon distingue les états up, slow et down. Enfin, CSS-Only Animated Status Bars montre des barres à 80 %, 45 % et 20 %.

Dans CodePen, copiez d’abord la structure HTML, puis les styles CSS dans leurs panneaux respectifs. Modifiez une seule variable à la fois : taille du cercle, durée, échelle du halo ou couleur. Si une démo est écrite en SCSS, vérifiez que le préprocesseur est activé ; sinon, utilisez le CSS compilé.

Testez enfin le composant avec un libellé réel, sur fond clair et sombre, ainsi qu’avec les mouvements réduits. Vérifiez la stabilité du point, la lisibilité du texte et la cohérence entre la couleur et l’état annoncé. Vous saurez alors si l’animation sert réellement l’indicateur au lieu de simplement attirer l’attention.