Signal Bars React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import SignalBars from "./SignalBars";

export default function Example() {
  return (
    <SignalBars
      color={"#da967b"}
      count={9}
      size={120}
      duration={1.6}
      paused={false}
      label={"Loading preview"}
    />
  );
}

Using Signal Bars

Render Signal Bars while an operation is pending and remove it when the result is ready. Supply a label that describes the loading operation.

Adjust count and size together to keep the bars distinct at small sizes. The paused prop freezes the wave, while reduced motion displays a static signal.

Props

Name	Type	Required	Default	Description
color	string	No	"#da967b"	Bar colour.
count	number	No	9	Number of bars, clamped to 3 through 20.
size	number	No	96	Width and height in pixels.
duration	number	No	1.6	Animation cycle duration in seconds.
paused	boolean	No	false	Pause the animated wave.
label	string	No	"Loading"	Accessible status description.
className	string	No	""	Additional classes on the root element.
style	CSSProperties	No	undefined	Inline styles for sizing, typography and appearance.