Components
- Accordion
- Alert
- Alert Dialog
- Autocomplete
- Avatar
- Badge
- Breadcrumb
- Button
- Card
- Checkbox
- Checkbox Group
- Collapsible
- Combobox
- CommandNew
- Dialog
- Empty
- Field
- Fieldset
- Form
- Frame
- Group
- Input
- Input Group
- Kbd
- Label
- Menu
- Meter
- Number Field
- Pagination
- Popover
- Preview Card
- Progress
- Radio Group
- Scroll Area
- Select
- Separator
- Sheet
- Skeleton
- Slider
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Toolbar
- Tooltip
Resources
Spinner
An indicator that can be used to show a loading state.
import { Spinner } from "@/components/ui/spinner";
export default function Particle() {
return <Spinner />;
}
Installation
pnpm dlx shadcn@latest add @coss/spinner
Usage
import { Spinner } from "@/components/ui/spinner"<Spinner />API Reference
Spinner
Use the Spinner component to display a loading indicator.
| Prop | Type | Default |
|---|---|---|
className | string |
Examples
Input Group
import {
InputGroup,
InputGroupAddon,
InputGroupInput,
} from "@/components/ui/input-group";
import { Spinner } from "@/components/ui/spinner";
export default function Particle() {
return (
<InputGroup>
<InputGroupInput disabled placeholder="Processing…" type="search" />
<InputGroupAddon>
<Spinner />
</InputGroupAddon>
</InputGroup>
);
}
Button
import { Button } from "@/components/ui/button";
import { Spinner } from "@/components/ui/spinner";
export default function Particle() {
return (
<Button disabled>
<Spinner />
Loading...
</Button>
);
}