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
API Reference
Spinner
Prop | Type | Default | Description |
---|---|---|---|
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. |