Loader

Component 28

About

A loading component with multiple variants to indicate processing states and provide visual feedback to users during wait times.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Loader to your project and fits it to your theme.

Code

How Loader is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

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

export function LoaderCircular() {
  return <Loader variant="circular" />
}

export function LoaderClassic() {
  return <Loader variant="classic" />
}

export function LoaderPulse() {
  return <Loader variant="pulse" />
}

export function LoaderPulseDot() {
  return <Loader variant="pulse-dot" />
}

export function LoaderDots() {
  return <Loader variant="dots" />
}

export function LoaderTyping() {
  return <Loader variant="typing" />
}

export function LoaderWave() {
  return <Loader variant="wave" />
}

export function LoaderBars() {
  return <Loader variant="bars" />
}

export function LoaderTerminal() {
  return <Loader variant="terminal" />
}

export function LoaderTextBlink() {
  return <Loader variant="text-blink" />
}

export function LoaderTextShimmer() {
  return <Loader variant="text-shimmer" />
}

export function LoaderLoadingDots() {
  return <Loader variant="loading-dots" />
}