Pulsing Status Badge

Une petite interface utilisateur de badge (indicateur) qui indique visuellement l’état en temps réel, par exemple si l’utilisateur est actuellement en ligne ou si le système fonctionne normalement.Il utilise une animation CSS (effet Ping/Pulse) qui provoque la propagation des ondulations vers l’extérieur à partir des points intérieurs.

Aperçu

System Operational

Live Streaming

Code d’implémentation (Implémentation)

<!-- Status: Online (Green) -->
<div class="flex items-center gap-2 px-3 py-1.5 bg-emerald-50 dark:bg-emerald-500/10 border border-emerald-100 dark:border-emerald-500/20 rounded-full">
<div class="relative flex h-3 w-3">
  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
  <span class="relative inline-flex rounded-full h-3 w-3 bg-emerald-500"></span>
</div>
<span class="text-sm font-medium text-emerald-700 dark:text-emerald-400">System Operational</span>
</div>

<!-- Status: Live (Red) -->
<div class="flex items-center gap-2 px-3 py-1.5 bg-rose-50 dark:bg-rose-500/10 border border-rose-100 dark:border-rose-500/20 rounded-full">
<div class="relative flex h-3 w-3">
  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-rose-400 opacity-75"></span>
  <span class="relative inline-flex rounded-full h-3 w-3 bg-rose-500"></span>
</div>
<span class="text-sm font-medium text-rose-700 dark:text-rose-400">Live Streaming</span>
</div>