CircleProgress

CircleProgress is a component that displays progress in a circular progress bar.

Import

import { CircleProgress, CircleProgressLabel } from "@yamada-ui/react"

Copied!

Usage

Editable example

<CircleProgress aria-label="Storage space" value={19} />

Copied!

Change Size

To change the size, set a string or number to boxSize.

Editable example

<CircleProgress aria-label="Storage space" value={18} boxSize={32} />

Copied!

Change Thickness

To change the thickness of the progress bar, set a string or number to thickness.

Editable example

<CircleProgress aria-label="Storage space" value={31} thickness={1} />

Copied!

Add Label

Editable example

<CircleProgress
  aria-label="Storage space"
  boxSize="120px"
  min={0}
  max={1000}
  value={444}
  color="purple.500"
  trackColor="green.300"
>
  <CircleProgressLabel color="purple.500">444%</CircleProgressLabel>
</CircleProgress>

Copied!

Round the Corners

You can round the progress bar by setting isRounded to true.

Editable example

<CircleProgress aria-label="Storage space" value={18} isRounded />

Copied!

Apply Animation

Setting isAnimation to true will apply animation.

Editable example

<CircleProgress value={18} isAnimation />

Copied!

Edit this page on GitHub

PreviousProgress NextMedia and Icons