Liferay.Design / Lexicon
Get StartedResources
Part of Liferay, IncCode/Content Licenses

Progress Bar

Sign In
View in FigmaView in ClayDocumentation

Progress bar indicates the percentage completed of a task.

indeterminate progress bar


Progress bars are used as a feedback mechanism for system tasks. As long as the process is running, the progress bar grows continuously from 0% to 100%. Use it for system processes.



The progress bar grows in primary color, and the label changes to reflect the completion percentage.

indeterminate progress bar


The warning state indicates that something happened and interrupted the process.

indeterminate progress bar


The finished state indicates that the process is completed successfully when the label changes to the success icon.

indeterminate progress bar

Dos and Don'ts

Use it for processes such as a file upload.Never use it to communicate the progress of a user in a certain set of actions. For that you need a multi step form type.
Something to improve? Report an issue!