Loader

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

Getting things ready…

Installation

npx shadcn@latest add https://scrollx-ui.vercel.app/registry/loader.json

Usage

import { Loader } from "@/components/ui/loader";
<Loader variant={24}>
      <span className="text-black dark:text-white">please wait</span>
    </Loader>

Examples

Default Variant

Getting things ready…

Magnetic-dots Variant

Hang tight

Dual-ring Variant

please wait

Cube Variant

Almost there…

API Reference

Loader

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

Props

PropertyTypeDefaultDescription
childrenReactNodeoptional
Optional content displayed next to the loader animation.
classNamestring""
Additional CSS classes to customize the loader container.
variant"default" | "cube" | "dual-ring" | "magnetic-dots""default"
Selects the loader animation style variant.
sizenumber24
Sets the loader’s width and height in pixels.

Built withby Ahdeetai.