Pulsing Status Badge

Kullanıcının o anda çevrimiçi olup olmadığı veya sistemin normal şekilde çalışıp çalışmadığı gibi gerçek zamanlı durumu görsel olarak aktaran küçük bir rozet (gösterge) kullanıcı arayüzü.Dalgaların iç noktalardan dışarıya doğru yayılmasına neden olan CSS animasyonunu (Ping/Pulse efekti) kullanır.

Önizleme

System Operational

Live Streaming

Uygulama kodu (Uygulama)

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