README
title: 'Progress Bar' description: 'Progress bar indicates the percentage completed of a task.' lexiconDefinition: 'https://liferay.design/lexicon/core-components/progress-bars/' packageNpm: '@clayui/progress-bar'
import { ProgressBar, ProgressBarFeedback, ProgressBarStatus, } from '$packages/clay-progress-bar/docs/index';
As long as the process is running, the progress bar grows continuously from 0% to 100%.
If you need to communicate the progress of a certain set of actions. You should use the Multi Step Nav component.
Status
You can use value
property to define the percentage value of the progress bar.
When value
is 100, the color of the progress bar will be styled to success
.
Also, you can use warn
property to set the color of the progress bar fixed on warning
.
Feedback
Use feedback
property to provide the same visual feedback to all items wrapped by ClayProgressBar
.