Radial Progress

Circular progress indicator with customizable appearance.

Import

import { RadialProgress } from 'asterui'

Examples

Basic

Simple radial progress with value.

</>

70%

import { RadialProgress } from 'asterui'

function App() {
  return (
      <RadialProgress value={70} />
    )
}

export default App

Different Values

Radial progress with various completion percentages.

</>

0%

25%

50%

75%

100%

import { RadialProgress } from 'asterui'

function App() {
  return (
      <div className="flex gap-4 flex-wrap">
        <RadialProgress value={0} />
        <RadialProgress value={25} />
        <RadialProgress value={50} />
        <RadialProgress value={75} />
        <RadialProgress value={100} />
      </div>
    )
}

export default App

Colors

Radial progress with different colors.

</>

70%

70%

70%

70%

70%

70%

70%

import { RadialProgress } from 'asterui'

function App() {
  return (
      <div className="flex gap-4 flex-wrap">
        <RadialProgress value={70} color="primary" />
        <RadialProgress value={70} color="secondary" />
        <RadialProgress value={70} color="accent" />
        <RadialProgress value={70} color="success" />
        <RadialProgress value={70} color="warning" />
        <RadialProgress value={70} color="error" />
        <RadialProgress value={70} color="info" />
      </div>
    )
}

export default App

Custom Size

Adjust size using the size prop.

</>

70%

70%

70%

70%

import { RadialProgress } from 'asterui'

function App() {
  return (
      <div className="flex gap-4 items-center flex-wrap">
        <RadialProgress value={70} size={3} />
        <RadialProgress value={70} size={5} />
        <RadialProgress value={70} size={8} />
        <RadialProgress value={70} size={12} />
      </div>
    )
}

export default App

Custom Thickness

Adjust ring thickness.

</>

70%

70%

70%

70%

import { RadialProgress } from 'asterui'

function App() {
  return (
      <div className="flex gap-4 flex-wrap">
        <RadialProgress value={70} thickness={2} />
        <RadialProgress value={70} thickness={5} />
        <RadialProgress value={70} thickness={10} />
        <RadialProgress value={70} thickness={20} />
      </div>
    )
}

export default App

Custom Content

Display custom content instead of percentage.

</>

85/100

60

days

import { RadialProgress } from 'asterui'
import { CheckIcon } from '@aster-ui/icons'

function App() {
  return (
      <div className="flex gap-4 flex-wrap">
        <RadialProgress value={85}>
          <div className="text-xs">85/100</div>
        </RadialProgress>
        <RadialProgress value={60}>
          <div className="flex flex-col items-center">
            <div className="text-2xl font-bold">60</div>
            <div className="text-xs">days</div>
          </div>
        </RadialProgress>
        <RadialProgress value={100} color="success">
          <CheckIcon size={32} />
        </RadialProgress>
      </div>
    )
}

export default App

No Value Display

Hide the percentage text.

</>

import { RadialProgress } from 'asterui'

function App() {
  return (
      <div className="flex gap-4 flex-wrap">
        <RadialProgress value={30} showValue={false} />
        <RadialProgress value={60} showValue={false} color="primary" />
        <RadialProgress value={90} showValue={false} color="success" />
      </div>
    )
}

export default App

With Background

Add background and border styling.

</>

70%

50%

90%

import { RadialProgress } from 'asterui'

function App() {
  return (
      <div className="flex gap-4 flex-wrap">
        <RadialProgress
          value={70}
          color="primary"
          className="bg-primary text-primary-content border-4 border-primary"
        />
        <RadialProgress
          value={50}
          color="secondary"
          className="bg-secondary text-secondary-content border-4 border-secondary"
        />
        <RadialProgress
          value={90}
          color="accent"
          className="bg-accent text-accent-content border-4 border-accent"
        />
      </div>
    )
}

export default App

API

RadialProgress

Property	Description	Type	Default
value	Progress value (0-100)	number	-
size	Size in rem units or CSS string	string | number	5rem
thickness	Ring thickness in pixels or CSS string	string | number	10% of size
color	Progress color	'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info' | 'neutral'	-
showValue	Show percentage text	boolean	true
children	Custom content to display	React.ReactNode	-
className	Additional CSS classes	string	-
data-testid	Test ID for testing	string	-

Accessibility

• Uses role="progressbar" with proper ARIA attributes
• Value is announced as percentage to screen readers
• Custom content can include additional accessible labels