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

import ComponentCodePreview from "@/components/app/component-code-preview" import { generateMetadata } from "../utils/metadata" import { LoaderBasic } from "./loader-basic" import { LoaderSizes } from "./loader-sizes" import { LoaderWithText } from "./loader-with-text"

export const metadata = generateMetadata( "Loader", "A loading component with multiple variants to indicate processing states and provide visual feedback to users during wait times." )

Loader

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

Examples

Basic Loader

Showcasing all available loader variants with default settings.

<ComponentCodePreview component={<LoaderBasic />} filePath="app/docs/loader/loader-basic.tsx" classNameComponentContainer="p-0" />

Loader Sizes

Customize the size of any loader variant with predefined size options.

<ComponentCodePreview component={<LoaderSizes />} filePath="app/docs/loader/loader-sizes.tsx" classNameComponentContainer="p-0" />

Loader With Text

Some loader variants support displaying custom text while loading.

<ComponentCodePreview component={<LoaderWithText />} filePath="app/docs/loader/loader-with-text.tsx" classNameComponentContainer="p-0 min-h-auto items-start" />

Installation

<Tabs defaultValue="cli"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">

<CodeBlock code={npx shadcn add "https://prompt-kit.com/c/loader.json"} language="bash" />

Note: If you are using Tailwind CSS v4, you may have to grab the keyframes and add them to your global.css file manually. Check manual installation for more details.

</TabsContent> <TabsContent value="manual"> <Steps>

<Step>Copy and paste the following into your global.css file.</Step>

<CodeBlock language="css" code={`@keyframes typing { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(-2px); opacity: 1; } }

@keyframes loading-dots { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

@keyframes wave { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.6); } }

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

@keyframes text-blink { 0%, 100% { color: var(--primary); } 50% { color: var(--muted-foreground); } }

@keyframes bounce-dots { 0%, 100% { transform: scale(0.8); opacity: 0.5; } 50% { transform: scale(1.2); opacity: 1; } }

@keyframes thin-pulse { 0%, 100% { transform: scale(0.95); opacity: 0.8; } 50% { transform: scale(1.05); opacity: 0.4; } }

@keyframes pulse-dot { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.5); opacity: 1; } }

@keyframes shimmer-text { 0% { background-position: 150% center; } 100% { background-position: -150% center; } }

@keyframes wave-bars { 0%, 100% { transform: scaleY(1); opacity: 0.5; } 50% { transform: scaleY(0.6); opacity: 1; } }

@keyframes shimmer { 0% { background-position: 200% 50%; } 100% { background-position: -200% 50%; } }

@keyframes spinner-fade { 0% { opacity: 0; } 100% { opacity: 1; } }`} />

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

<CodeBlock filePath="components/prompt-kit/loader.tsx" language="tsx" />

<Step>Update the import paths to match your project setup.</Step>

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

Component API

Loader

| Prop | Type | Default | Description | | :-------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------ | :--------- | :--------------------------------------- | | variant | "circular" | "classic" | "pulse" | "pulse-dot" | "dots" | "typing" | "wave" | "bars" | "terminal" | "text-blink" | "text-shimmer" | "loading-dots" | "circular" | The visual style of the loader | | size | "sm" | "md" | "lg" | "md" | The size of the loader | | text | string | | Text to display (for supported variants) | | className | string | | Additional CSS classes |

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