Spinner

A spinner component to indicate loading states.

tsx
import { Spinner } from "@/components/ui/spinner"
export function SpinnerDemo() {
return <Spinner />
}

Installation

CLI

bash
npx fivui add spinner

Manual

Copy and paste the following code into your project.

components/ui/spinner.tsx
'use client'
import * as React from 'react'
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'
const spinnerVariants = cva('', {
variants: {
size: {
xs: 'size-4',
sm: 'size-5',
md: 'size-6',
lg: 'size-8',
xl: 'size-10',
},
},
defaultVariants: {
size: 'md',
},
})
export interface SpinnerProps
extends React.HTMLAttributes<HTMLDivElement>,
VariantProps<typeof spinnerVariants> {
variant?: 'simple' | 'circle' | 'ring' | 'wave' | 'dot-pulse' | 'dot-intermittent' | 'dot-circle'
}
const Spinner = React.forwardRef<HTMLDivElement, SpinnerProps>(
({ className, variant = 'ring', size, ...props }, ref) => {
const spinnerClassName = cn(spinnerVariants({ size }))
const renderSpinner = () => {
switch (variant) {
case 'simple':
return <div className={cn('spinner-simple', spinnerClassName)} />
case 'circle':
return <div className={cn('spinner-circle', spinnerClassName)} />
case 'dot-intermittent':
return <div className={cn('spinner-dot-intermittent', spinnerClassName)} />
case 'ring':
return (
<svg
className={cn('spinner-ring', spinnerClassName)}
viewBox="25 25 50 50"
strokeWidth="5"
>
<circle cx="50" cy="50" r="20" />
</svg>
)
case 'dot-pulse':
return (
<div className={cn('spinner-dot-pulse', spinnerClassName)}>
<div className="spinner-pulse-dot" />
</div>
)
case 'wave':
return (
<div className={cn('spinner-wave', spinnerClassName)}>
<div className="spinner-wave-dot" />
<div className="spinner-wave-dot" />
<div className="spinner-wave-dot" />
<div className="spinner-wave-dot" />
</div>
)
case 'dot-circle':
return (
<div className={cn('spinner-dot-circle', spinnerClassName)}>
<div className="spinner-dot" />
<div className="spinner-dot" />
<div className="spinner-dot" />
<div className="spinner-dot" />
<div className="spinner-dot" />
<div className="spinner-dot" />
<div className="spinner-dot" />
<div className="spinner-dot" />
</div>
)
default:
return <div className={cn('spinner-circle', spinnerClassName)} />
}
}
return (
<div
ref={ref}
className={cn(
'inline-flex items-center justify-center text-primary',
className
)}
{...props}
>
{renderSpinner()}
</div>
)
}
)
Spinner.displayName = 'Spinner'
export { Spinner }

Usage

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

Examples

simple
circle
ring
wave
dot-pulse
dot-intermittent

API Reference

Spinner

PropTypeDefaultDescription
variant'simple' | 'circle' | 'ring' | 'wave' | 'dot-pulse' | 'dot-intermittent''ring'The visual style of the spinner.
size'xs' | 'sm' | 'md' | 'lg' | 'xl''md'The size of the spinner.