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

---

title: Spinner description: An indicator that can be used to show a loading state.

<ComponentPreview name="spinner-demo" className="[&_.preview]:p-6" />

Installation

<CodeTabs> <TabsList> <TabsTab value="cli">CLI</TabsTab> <TabsTab value="manual">Manual</TabsTab> </TabsList> <TabsPanel value="cli">

npx shadcn@latest add @coss/spinner

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

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

<ComponentSource name="spinner" title="components/ui/spinner.tsx" />

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

</Steps> </TabsPanel> </CodeTabs>

Usage

import { Spinner } from "@/components/ui/spinner"

<Spinner />

Examples

Input Group

<ComponentPreview name="input-group-loading" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

Button

<ComponentPreview name="button-loading" />

API Reference

Spinner

Use the Spinner component to display a loading indicator.

| Prop | Type | Default | | ----------- | -------- | ------- | | className | string | |

<Spinner />

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