Loader

Text 152

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 LoaderBasic() {
  const variants = [
    "terminal",
    "text-blink",
    "loading-dots",
  ] as const

  return (
    <div className="flex w-full flex-col space-y-8 p-4">
      <div className="grid grid-cols-2 gap-8 sm:grid-cols-3 md:grid-cols-4">
        {variants.map((variant) => (
          <div
            key={variant}
            className="flex flex-col items-center justify-center gap-2 p-4"
          >
            <Loader variant={variant} />
            <span className="text-muted-foreground text-sm">{variant}</span>
          </div>
        ))}
      </div>
    </div>
  )
}