║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Loader description: Animated versatile loader with different variants, customizable size and content.

<ComponentPreview name="loader-demo" className="p-0" description="" />

Installation

<Tabs defaultValue="cli" className="w-full"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli"> <PkgOptions name="loader" /> </TabsContent> <TabsContent value="manual"> <Steps>

<Step>Install the following dependencies:</Step> <DepsOptions name="framer-motion" />

<Step>Copy and paste the following code into your project.</Step>

<p> <code>loader.tsx</code> </p> <ComponentSource name="loader" />

<Step>Add util file</Step>

<p> <code>lib/utils.ts</code> </p>

import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

</Steps> </TabsContent> </Tabs>

Usage

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

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

Examples

---

<Step>Default Variant</Step>

<ComponentPreview name="loader-demo" className="" description="" />

---

<Step>Magnetic-dots Variant</Step>

<ComponentPreview name="loadermagnetic-dots" className="" description="" />

---

<Step>Dual-ring Variant</Step>

<ComponentPreview name="loaderdual-ring" className="" description="" />

---

<Step>Cube Variant</Step>

<ComponentPreview name="loadercube" className="" description="" />

API Reference

Loader

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

Props

<PropsTable rows={[ { prop: "children", type: "ReactNode", default: "optional", description: "Optional content displayed next to the loader animation." }, { prop: "className", type: "string", default: '""', description: "Additional CSS classes to customize the loader container." }, { prop: "variant", type: '"default" | "cube" | "dual-ring" | "magnetic-dots"', default: '"default"', description: "Selects the loader animation style variant." }, { prop: "size", type: "number", default: "24", description: "Sets the loader’s width and height in pixels." } ]} />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║