Pulsing Status Badge

Uma pequena UI de crachá (indicador) que transmite visualmente o status em tempo real, como se o usuário está online no momento ou se o sistema está operando normalmente.Ele usa animação CSS (efeito Ping/Pulse) que faz com que as ondulações se espalhem para fora dos pontos internos.

Visualização

System Operational

Live Streaming

Código de implementação (Implementação)

<!-- 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>