Circular Progress Bar

The CircularProgressBar component allows you to display progress in a circular format, indicating completion or status visually.

default Circular ProgressBar

0%

Circular ProgressBar on visible

0%

Props

Explore the available props for the CircularProgressBar component

PropTypeDefaultDescription
valuenumber75ProgressBar value.
durationnumber2Animation duration in second.
onVisiblebooleanfalseAnimate circular progress-bar onVisible.
strokeWidthnumber2Stroke width value.
strokeColorstring#CCCCCCColor for the stroke.
strokeFillColorstring#333333Color for the stroke fill.
stylestring-Any CSS className to style the Circular ProgressBar.
contentStylestring-Any CSS className to style the Circular ProgressBar content.
childrennode-Child components and content to be placed within it.