Circular Progress

• 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#

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

Usage#

<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.

<CircularProgress
  showPercent
  value={40}
  colorScheme="text-green-600"
  size="50px"
/>

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" />

Accessibility#

• 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.

Props#