Spinner
Displays an 8-bit spinner component.
8-bit spinner component
Classic
Diamond
Installation
pnpm dlx shadcn@latest add @8bitcn/spinner
Usage
Variants
Use the variant prop to change the style of the spinner. Defaults to classic.
8-bit spinner classic variant
8-bit spinner diamond variant
Size
Use the size-* utility class to change the size of the spinner.
8-bit classic spinner with different sizes
8-bit diamond spinner with different sizes
Color
Use the text- utility class to change the color of the spinner.
8-bit classic spinner with different colors
8-bit diamond spinner with different colors
Button
Add a spinner to a button to indicate a loading state. The Button will handle the spacing between the spinner and the text.
8-bit classic spinner in buttons
8-bit diamond spinner in buttons
Badge
You can also use a spinner inside a badge.
8-bit classic spinner in badges
Syncing
Updating
Processing
8-bit diamond spinner in badges
Syncing
Updating
Processing