Components
Processing payment...
$100.00
Installation
pnpm dlx shadcn@latest add https://basecn.dev/r/spinner.jsonor
If you are using a namespaced registry, you can use the following command:
pnpm dlx shadcn@latest add @basecn/spinnerCustomization
You can replace the default spinner icon with any other icon by editing the Spinner component.
Examples
Size
Use the size-* utility class to change the size of the spinner.
Color
Use the text- utility class to change the color of the spinner.
Button
Add a spinner to a button to indicate a loading state. The <Button /> will handle the spacing between the spinner and the text.
Badge
You can also use a spinner inside a badge.
SyncingUpdatingProcessing
Input Group
Input Group can have spinners inside <InputGroupAddon>.
Validating...
Empty
Processing your request
Please wait while we process your request. Do not refresh the page.
Item
Use the spinner inside <ItemMedia> to indicate a loading state.
Downloading...
129 MB / 1000 MB