Ring Spinner

A track ring with a rotating arc sweeping around it.

Example.tsx

import { RingSpinner } from "@/components/better/ring-spinner"

export function Example() {
  return (
    <RingSpinner size={40} thickness={4} arc={0.25} speed={0.9} color="#6366f1" />
  )
}

Dependencies

motion

Props

Prop	Type	Default	Description
className	string	—
size	number	40	Outer diameter in px.
thickness	number	4	Stroke thickness in px.
color	string	"currentColor"	Arc colour (any CSS color).
arc	number	0.25	Fraction of the ring the moving arc covers, 0–1.
speed	number	0.9	Seconds per rotation.