ProgressCircle

SVG circular progress indicator. Shares the same animation engine as ProgressBar (easing, checkpoints, pause/resume) and adds a renderInner slot for centered content.

Props

Prop	Type	Default	Description
`duration`	`number`	`5000`	Full animation duration in milliseconds
`trackColor`	`string`	`#e5e7eb`	Background track color
`fillColor`	`string`	`#3b82f6`	Progress fill color
`trackWidth`	`number`	`8`	Track stroke width
`fillWidth`	`number`	`8`	Fill stroke width
`lineCap`	`'round' \| 'butt' \| 'square'`	`'round'`	Stroke line cap
`autoStart`	`boolean`	`true`	Start animation on mount
`animation`	`EasingType`	`'linear'`	Easing curve
`checkpoints`	`ProgressCircleCheckpoint[]`	`[]`	Checkpoints that fire callbacks or pause
`onCheckpoint`	`(percentage: number) => void`	—	Called when a checkpoint is reached
`onProgress`	`(percentage: number) => void`	—	Called on every whole-number progress change
`onComplete`	`() => void`	—	Called when progress reaches 100%
`size`	`number`	`100`	SVG viewBox size
`renderInner`	`(progress: number) => ReactNode`	—	Render custom content centered inside the circle
`className`	`string`	—	Container className
`style`	`CSSProperties`	—	Container style

Ref Handle

Method	Description
`start()`	Start the animation from the beginning
`pause()`	Pause the animation
`resume()`	Resume after a pause
`reset()`	Reset to 0 without starting

Example


<ProgressCircle
  duration={5000}
  fillColor="#2FAD39"
  trackColor="#ededed"
  animation="easeOut"
  onComplete={() => goToNextPage()}
  renderInner={(progress) => <span>{progress}%</span>}
/>