Spectrum Loader

A professional SVG-based loading indicator that features a vibrant, animated rainbow spectrum. By leveraging layered radial gradients and cinematic glow filters, it creates a premium visual experience. The component uses Framer Motion for high-performance spinning and stroke-draw animations, making it both smooth and highly customizable through props.

...

How to Import

Add this import to your component file

app/page.tsx

1import { SpectrumLoader } from "@/components/lightswind/spectrum-loader"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

size	number	48	The width and height of the loader in pixels.	Optional
strokeWidth	number	4	The thickness of the loader's ring.	Optional
duration	number	2	The time in seconds for one complete animation cycle.	Optional
colors	string[]	["#ff8000", "#00ff19", "#9900ff", "#ffff00", "#FF0000", "#00CCFF"]	An array of 6 hex or CSS color strings to define the spectrum gradients.	Optional
glow	boolean	true	Enable or disable the cinematic bloom/glow effect.	Optional
className	string	-	Additional CSS classes for the container wrapper.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { SpectrumLoader } from "@/components/lightswind/spectrum-loader";
2
3export default function App() {
4  return (
5    <div className="flex items-center justify-center p-20">
6      <SpectrumLoader size={64} strokeWidth={4} glow={true} />
7    </div>
8  );
9}

Previoussliding-logo-marquee

Nextstack-list

A product byＭＵＨＩＬＡＮ and Team❤️.

Spectrum Loader

A professional SVG-based loading indicator that features a vibrant, animated rainbow spectrum. By leveraging layered radial gradients and cinematic glow filters, it creates a premium visual experience. The component uses Framer Motion for high-performance spinning and stroke-draw animations, making it both smooth and highly customizable through props.

...

How to Import

Add this import to your component file

app/page.tsx

1import { SpectrumLoader } from "@/components/lightswind/spectrum-loader"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

size	number	48	The width and height of the loader in pixels.	Optional
strokeWidth	number	4	The thickness of the loader's ring.	Optional
duration	number	2	The time in seconds for one complete animation cycle.	Optional
colors	string[]	["#ff8000", "#00ff19", "#9900ff", "#ffff00", "#FF0000", "#00CCFF"]	An array of 6 hex or CSS color strings to define the spectrum gradients.	Optional
glow	boolean	true	Enable or disable the cinematic bloom/glow effect.	Optional
className	string	-	Additional CSS classes for the container wrapper.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { SpectrumLoader } from "@/components/lightswind/spectrum-loader";
2
3export default function App() {
4  return (
5    <div className="flex items-center justify-center p-20">
6      <SpectrumLoader size={64} strokeWidth={4} glow={true} />
7    </div>
8  );
9}

Previoussliding-logo-marquee

Nextstack-list

A product byＭＵＨＩＬＡＮ and Team❤️.

Spectrum Loader

How to Import

Props

Basic Usage

On This Page

Contribute

Spectrum Loader

How to Import

Props

Basic Usage

On This Page

Contribute

React Spectrum Loader Component - Lightswind UI

Key Details of React Spectrum Loader

Spectrum Loader

How to Import

Props

Basic Usage

On This Page

Contribute

Spectrum Loader

How to Import

Props

Basic Usage

On This Page

Contribute