Circular Progress

Circular Progress is used to indicates the progress for determinate and indeterminate processes.

  • Determine progress: fills the circular track with color, as the indicator moves from 0 to 360 degrees.
  • Indeterminate progress: grows and shrinks the indicator while moving along the circular track.


import { CircularProgress } from "@nature-ui/core";


<CircularProgress value={80} />

Changing the size#

You can add size prop to the progress bar to add a custom size.

// Change the size to 120px
<CircularProgress value={30} size="120px" />

Changing the thickness#

You can add the thickness prop to update the thickness of the progress ring.

The thickness has to be a ratio of the size. Value should be between 0 and 1.

<CircularProgress value={59} size="100px" thickness="4px" />

Changing the color#

You can add colorScheme prop to any progress bar to apply any color that exists in the theme config file.

<CircularProgress value={30} colorScheme="text-orange-400" thickness="12px" />

Adding label#

You can add label prop to any progress bar to include a label text.


Indeterminate Progress#

Setting the progress to indeterminate means you're not able to determine the value upfront. Pass the isIndeterminate prop to activate this state.

<CircularProgress isIndeterminate colorScheme="text-primary-500" />


  • Progress has role set to progressbar to denote that it is a progress bar.
  • Progress has aria-valuenow set to the percentage completion value passed to the component, to ensure the progress percent is visible to screen readers.


sizestring or number48pxThe size of the circular progress in CSS units. When provided with a number, the unit defaults to px
maxnumber100Maximum value defining 100% progress made (must be higher than 'min')
minnumber0Minimum value defining 'no progress' (must be lower than 'max')
valuenumberCurrent progress (must be between min/max)
isIndeterminatebooleanPuts the component into 'indeterminate' state; Ignores 'value' prop
thicknessstring or number10pxThe thickness of progress indicator
anglenumber0Angle to rotate progress indicator by
capIsRoundbooleanIf true, the cap of the progress indicator will be rounded
childrenReact.ReactNodeThe content of the circular progress bar. If passed, the content will be inside and centered in the progress bar
trackColorstringgrayThe color name of the progress track. Use a color key in the theme object
colorSchemestringblueThe color of the progress indicator. Use a color key in the theme object