Progress Bar

The ProgressBar visually indicates the completion status of a task or process.

default progressBar

60%

progressBar on visible

85%

Props

Explore the available props for the ProgressBar component

PropTypeDefaultDescription
valuenumber-ProgressBar value.
contentPositionstringrightContent position of the progress bar.
right left
durationnumber2Animation duration in second.
animateOnLoadbooleantrueAnimate progress-bar onLoad.
animateOnVisiblebooleanfalseAnimate progress-bar onVisible.
stylestring-Any CSS className to style the ProgressBar.
containerStylestring-Any CSS className to style the ProgressBar container.
fillStylestring-Any CSS className to style the ProgressBar fillStyle.
contentStylestring-Any CSS className to style the ProgressBar content.
childrennode-Child components and content to be placed within it.