Skip to content

Signal Strength

A copy-paste indicators component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.

IndicatorsHTMLCSSany framework

Copy into your project

HTML
<div class="nuda-signal" aria-label="Strong signal">
  <span class="is-on"></span>
  <span class="is-on"></span>
  <span class="is-on"></span>
  <span></span>
</div>
CSS
.nuda-signal {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 18px;
}

.nuda-signal span {
  width: 4px;
  background: rgba(255,255,255,.16);
  border-radius: 1px;
  transition: background .35s;
}

.nuda-signal span:nth-child(1) {
  height: 30%;
}

.nuda-signal span:nth-child(2) {
  height: 55%;
}

.nuda-signal span:nth-child(3) {
  height: 80%;
}

.nuda-signal span:nth-child(4) {
  height: 100%;
}

.nuda-signal span.is-on {
  background: #6ee7b7;
  box-shadow: 0 0 4px rgba(110,231,183,.4);
  animation: _sigPulse 2s ease-in-out infinite;
}

.nuda-signal span.is-on:nth-child(2) {
  animation-delay: .15s;
}

.nuda-signal span.is-on:nth-child(3) {
  animation-delay: .3s;
}

@keyframes _sigPulse {
  0%,100% {
    opacity: 1;
  }
  50% {
    opacity: .7;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-signal span.is-on {
    animation: none;
  }
}

How to use Signal Strength

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.

More indicators components

← Browse all NudaUI components