Spinner

Copy Markdown

A spinner for displaying a loading state.

PreviewCode

Generating image...

78%

Installation#

CLIManual

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/spinner

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

<Spinner />

Use the size-* utility class to change the size of the spinner.

PreviewCode

Add a spinner to a badge to indicate a loading state.

PreviewCode

DeletingGenerating

Use a spinner in an input group addon to indicate a loading or validating state.

PreviewCode

Use the Spinner component to display a loading indicator. It forwards SVG props and supports className for sizing and styling.

Prop	Type	Default
`className`	`string`	-
`aria-label`	`string`	`"Loading"`

[

Slider ](/docs/components/slider)[

Status ](/docs/components/status)

On This Page