Loader

PreviousNext

Loading indicator for AI processing states.

Loader
import { Loader } from "@/components/ai-elements/loader"

export function LoaderDemo() {
  return (
    <div className="flex items-center justify-center p-8">
      <Loader size={24} />
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add loader

Usage

import { Loader } from "@/ai-elements/loader"
<Loader size={24} />

Examples

Different Sizes

<div className="flex items-center gap-4">
  <Loader size={16} />
  <Loader size={24} />
  <Loader size={32} />
</div>

With Text

<div className="flex items-center gap-2">
  <Loader size={16} />
  <span className="text-sm text-muted-foreground">Processing...</span>
</div>

API Reference

Loader

PropTypeDefaultDescription
sizenumber16Size of the loader in pixels
classNamestring-Additional CSS classes