Spectrum Loader 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 SpectrumLoader from "./SpectrumLoader";

export default function Example() {
  return (
    <SpectrumLoader
      color={"#b39bcc"}
      endColor={"#ddb18b"}
      bars={17}
      width={180}
      height={75}
      speed={1.3}
      paused={false}
      label={"Loading collection"}
    />
  );
}

Using Spectrum Loader

Use label to name the operation being performed. bars, width, and height control the spectrum's proportions.

color and endColor define the colour progression. Use paused to hold the animation without changing the loader's layout.

Props

Name	Type	Required	Default	Description
color	string	No	"#be9fcb"	Colour at the start of the spectrum.
endColor	string	No	"#dcac89"	Colour at the end of the spectrum.
bars	number	No	13	Bar count, clamped to 3–40.
width	number \| string	No	160	Width, capped to the parent.
height	number \| string	No	64	Height of the loading visual.
speed	number	No	1.3	Pulse duration in seconds.
paused	boolean	No	false	Pause the current animation.
label	string	No	"Loading"	Accessible status text.
className	string	No	""	Additional classes for the root element.
style	CSSProperties	No	undefined	Inline styles for caller-defined size, typography, and appearance.