Status Dot
A copy-paste indicators component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
IndicatorsHTMLCSSany framework
Copy into your project
HTML
<!-- Online (pulsing) -->
<span class="nuda-status-dot" data-status="online" aria-label="Online"></span>
<!-- Away -->
<span class="nuda-status-dot" data-status="away" aria-label="Away"></span>
<!-- Offline -->
<span class="nuda-status-dot" data-status="offline" aria-label="Offline"></span>CSS
/* Status Dot
Pulsing online/offline/away indicator.
Customize: --status-size */
.nuda-status-dot {
--status-size: 12px;
width: var(--status-size);
height: var(--status-size);
border-radius: 50%;
position: relative;
display: inline-block;
}
.nuda-status-dot[data-status="online"] {
background: #22c55e;
box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}
.nuda-status-dot[data-status="online"]::after {
content: '';
position: absolute;
inset: -3px;
border-radius: 50%;
border: 2px solid #22c55e;
animation: nuda-status-pulse 1.5s ease-out infinite;
opacity: 0;
}
.nuda-status-dot[data-status="away"] {
background: #f59e0b;
}
.nuda-status-dot[data-status="offline"] {
background: #6b7280;
}
@keyframes nuda-status-pulse {
0% {
transform: scale(0.8);
opacity: 0.6;
}
100% {
transform: scale(1.8);
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.nuda-status-dot[data-status="online"]::after {
animation: none;
}
}How to use Status Dot
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.