Default

The most basic setup for a loader.

Change the animation style of the loader by setting the variant prop.

<Loader/>
<Loader variant="ripple" />
<Loader variant="pulse" />
<Loader variant="orbit" />

Customize the loader color using the color prop.

<Loader color="#4f46e5" />
<Loader color="tomato" />

Control the speed of the loader animation with the duration prop.

<Loader duration={500} />
<Loader duration={2000} />

Set the theme of the loader — light, dark, or system.

<Loader theme="dark" />
<Loader theme="light" />
<Loader theme="system" />

Pass custom classes and any HTML attributes like id, aria-*, onClick, etc.

<Loader 
  className="mx-auto my-10" 
  id="custom-loader" 
  onClick={() => alert('Loader clicked!')}
/>