Spinner
Animated loading indicators with customizable borders and gradients.
Super intelligent AI is thinking
At least we think it is thinking
Installation
npx shadcn@latest add https://raw.githubusercontent.com/FifthWit/ui/refs/heads/main/public/r/spinner.jsonAnatomy
import { SpinnerRainbowBorder, SpinnerOutline } from "@/components/spinner";
export default () => (
<>
<SpinnerRainbowBorder loading={true}>
<div>Content...</div>
</SpinnerRainbowBorder>
<SpinnerOutline loading={true}>
<div>Content...</div>
</SpinnerOutline>
</>
)Examples
Spinner Outline
A smooth gradient outline variant where you can customize primary and background colors.
ClaudePilotGPT is thinking...
Props
<SpinnerRainbowBorder />
Prop
Type
<SpinnerOutline />
Prop
Type