Circular Progress

A circular progress indicator with smooth animations and customizable styling.

Installation

Install via CLI:

npx @sickui/cli add circular-progress

Manual Installation

If you prefer to install manually, copy and paste the following code into your project.

npm install framer-motion class-variance-authority clsx tailwind-merge

Usage

Size Variants

Use the size prop to change the size of the circular progress indicator.

Small

Default

Large

Extra Large

Stroke Width

Customize the thickness of the progress ring using the strokeWidth prop.

Thin (2px)

Default (6px)

Thick (10px)

Extra Thick (14px)

Animated Progress

Create smooth animated progress indicators with real-time updates.

Animated Progress

Value Display

Control whether to show the percentage value using the showValue prop.

No Value Display

With Value Display

Loading States

Perfect for showing loading progress in applications.

API Reference

CircularProgress

Prop	Type	Default	Description
`value`	`number`	-	The progress value (0-100)
`size`	`"sm" \| "default" \| "lg" \| "xl"`	`"default"`	The size of the circular progress indicator
`strokeWidth`	`number`	`6`	The width of the progress ring stroke
`showValue`	`boolean`	`true`	Whether to display the percentage value in the center
`duration`	`number`	`1`	Animation duration in seconds for progress changes
`className`	`string`	-	Additional CSS classes to apply to the component

The component also accepts all standard HTML div attributes.

Accessibility

The CircularProgress component includes built-in accessibility features:

ARIA attributes: Proper role and aria-* attributes for screen readers
Semantic structure: Uses semantic HTML elements where appropriate
Keyboard navigation: Focusable when interactive
Screen reader support: Progress value is announced to assistive technologies
High contrast: Respects system color preferences and theme settings

Examples in the Wild

Here are some common use cases for the CircularProgress component:

File Upload Progress

<CircularProgress 
  value={uploadProgress} 
  size="lg" 
  strokeWidth={8}
/>

Loading Spinner

<CircularProgress 
  value={loadingProgress} 
  showValue={false}
  duration={0.5}
/>

Dashboard Metrics

<div className="grid grid-cols-3 gap-4">
  <CircularProgress value={85} size="sm" />
  <CircularProgress value={92} size="sm" />
  <CircularProgress value={78} size="sm" />
</div>

Skill Level Indicators

<CircularProgress 
  value={skillLevel} 
  size="xl" 
  strokeWidth={12}
/>