Circular Progress

Circular progress component for displaying circular progress indicators with various styles, sizes, and label positions.

import { CircularProgress } from "@ninna-ui/feedback"

pnpm add @ninna-ui/feedback

Requires @ninna-ui/core (auto-installed) + CSS setup.

View source

Usage

Import and use the CircularProgress component in your application.

import { CircularProgress } from "@ninna-ui/feedback";

export default function Example() {
  return (
    <div>
      <CircularProgress value={50} />
      <CircularProgress value={75} color="success" showValue />
      <CircularProgress indeterminate color="primary" />
    </div>
  );
}

Basic

Simple circular progress indicators with different values.

Colors

Circular progress in different color themes.

Sizes

Circular progress in different sizes from xs to xl.

With Label

Circular progress with value labels in different positions.

Center Label

65%

Bottom Label

45%

No Label

Custom Label

Circular progress with custom label formatting and content.

Custom Format (Steps)

3/5

Custom Format (Score)

85pts

Custom Content

75%

Complete

Indeterminate

Indeterminate circular progress for unknown duration tasks.

Indeterminate

Different Colors

Different Sizes

Use Cases

Real-world circular progress usage examples.

Download Progress

Dashboard Stats

92%

Uptime

67%

CPU

45%

Memory

78%

Storage

Loading State

Loading your data...

API Reference

Complete list of props for the CircularProgress component.

Props

Prop	Type	Default	Description
`value`	`number`	`0`	Current progress value (0 to max)
`max`	`number`	`100`	Maximum value for the progress
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Size of the circular progress
`color`	`'neutral' \| 'primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Color theme of the progress indicator
`strokeWidth`	`number`	-	Custom stroke width (overrides size default)
`showValue`	`boolean`	`false`	Whether to show the value label
`labelPosition`	`'center' \| 'bottom' \| 'none'`	`'center'`	Position of the value label
`formatLabel`	`(value: number, max: number) => ReactNode`	-	Custom format function for the value label
`indeterminate`	`boolean`	`false`	Whether the progress is indeterminate (loading state)
`label`	`string`	-	Accessible label for screen readers
`children`	`ReactNode`	-	Custom content to render inside the circle
`className`	`string`	-	Additional CSS classes for the container

Accessibility

Uses role="progressbar" on the SVG element for screen reader support
Includes aria-valuenow, aria-valuemin, and aria-valuemax attributes
Supports aria-label for custom accessible labels
Indeterminate state uses aria-busy="true" to indicate loading