Pulsing Status Badge
Значок с волнистой анимацией (Пульс), подчеркивающий, что вы находитесь в сети или ведете прямую трансляцию.
Tailwind CSSHTML
Небольшой значок (индикатор) пользовательского интерфейса, который визуально передает статус в реальном времени, например, находится ли пользователь в сети в данный момент или нормально ли работает система.Он использует анимацию CSS (эффект Ping/Pulse), которая заставляет рябь распространяться наружу от внутренних точек.
Предварительный просмотр
System Operational
Live Streaming
Код реализации (Реализация)
<!-- 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>