Loader

Animated versatile loader with different variants, customizable size and content.

Installation

npx shadcn@latest add @scrollxui/loader

import { Loader } from '@/components/ui/loader';

<Loader variant={24}>
  <span className='text-black dark:text-white'>please wait</span>
</Loader>

Flexible animated loader offering multiple styles, adjustable size, and children.

Property	Type	Default	Description
`children`	ReactNode	`optional`	Optional content displayed next to the loader animation.
`className`	string	`""`	Additional CSS classes to customize the loader container.
`variant`	"default" \| "cube" \| "dual-ring" \| "magnetic-dots"	`"default"`	Selects the loader animation style variant.
`size`	number	`24`	Sets the loader’s width and height in pixels.