Magic Loader

A mesmerizing particle-based loader with spinning effects and customizable colors. Perfect for loading states and adding visual appeal with smooth canvas animations.

...

How to Import

Add this import to your component file

app/page.tsx

1import MagicLoader from "@/components/lightswind/magic-loader"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

size	number	200	Size of the loader in pixels. Automatically responsive.	Optional
particleCount	number	1	Number of particles generated per frame. Higher values create denser effects.	Optional
speed	number	1	Animation speed multiplier. Values above 1 increase speed, below 1 decrease it.	Optional
hueRange	[number, number]	[0, 360]	HSL hue range for particle colors as [start, end] in degrees (0-360).	Optional
className	string	undefined	Additional CSS classes for the loader container.	Optional

Basic Usage

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

app/page.tsx

1import MagicLoader from "@/components/lightswind/magic-loader";
2
3// Basic Usage
4<MagicLoader />
5
6// Custom Size and Speed
7<MagicLoader 
8  size={300} 
9  speed={1.5} 
10/>
11
12// Fire Theme
13<MagicLoader 
14  size={250}
15  particleCount={2}
16  speed={1.2}
17  hueRange={[0, 40]}
18/>
19
20// Ocean Theme
21<MagicLoader
22  size={200}
23  speed={0.8}
24  hueRange={[180, 220]}
25/>
26
27// Mobile Optimized
28<MagicLoader
29  size={150}
30  particleCount={1}
31  speed={0.7}
32  className="md:hidden"
33/>

Previousmagic-card

Nextmorphing-navigation

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

Magic Loader

A mesmerizing particle-based loader with spinning effects and customizable colors. Perfect for loading states and adding visual appeal with smooth canvas animations.

...

How to Import

Add this import to your component file

app/page.tsx

1import MagicLoader from "@/components/lightswind/magic-loader"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

size	number	200	Size of the loader in pixels. Automatically responsive.	Optional
particleCount	number	1	Number of particles generated per frame. Higher values create denser effects.	Optional
speed	number	1	Animation speed multiplier. Values above 1 increase speed, below 1 decrease it.	Optional
hueRange	[number, number]	[0, 360]	HSL hue range for particle colors as [start, end] in degrees (0-360).	Optional
className	string	undefined	Additional CSS classes for the loader container.	Optional

Basic Usage

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

app/page.tsx

1import MagicLoader from "@/components/lightswind/magic-loader";
2
3// Basic Usage
4<MagicLoader />
5
6// Custom Size and Speed
7<MagicLoader 
8  size={300} 
9  speed={1.5} 
10/>
11
12// Fire Theme
13<MagicLoader 
14  size={250}
15  particleCount={2}
16  speed={1.2}
17  hueRange={[0, 40]}
18/>
19
20// Ocean Theme
21<MagicLoader
22  size={200}
23  speed={0.8}
24  hueRange={[180, 220]}
25/>
26
27// Mobile Optimized
28<MagicLoader
29  size={150}
30  particleCount={1}
31  speed={0.7}
32  className="md:hidden"
33/>

Previousmagic-card

Nextmorphing-navigation

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

Magic Loader

How to Import

Props

Basic Usage

On This Page

Contribute

Magic Loader

How to Import

Props

Basic Usage

On This Page

Contribute

React Magic Loader Component - Lightswind UI

Key Details of React Magic Loader

Magic Loader

How to Import

Props

Basic Usage

On This Page

Contribute

Magic Loader

How to Import

Props

Basic Usage

On This Page

Contribute