On this page

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@latest

Includes @ninna-ui/core. CSS setup required.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.

Live preview/ Default

Colors

Circular progress in different color themes.

Live preview/ Default

Sizes

Circular progress in different sizes from xs to xl.

Live preview/ Default

With Label

Circular progress with value labels in different positions.

Live preview/ Default

Center Label

65%

Bottom Label

45%

No Label

Custom Label

Circular progress with custom label formatting and content.

Live preview/ Default

Custom Format (Steps)

3/5

Custom Format (Score)

85pts

Custom Content

75%

Complete

Indeterminate

Indeterminate circular progress for unknown duration tasks.

Live preview/ Default

Indeterminate

Different Colors

Different Sizes

Use Cases

Real-world circular progress usage examples.

Live preview/ Default

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