Liferay.Design / Lexicon
/
Get StartedResources
Part of Liferay, IncCode/Content LicensesPowered by Gatsby and Netlify

Progress Bar

Sign In
View in FigmaView in ClayDocumentation

Progress bar indicates the percentage completed of a task.

indeterminate progress bar

Usage

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.

States

Loading

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

indeterminate progress bar

Warning

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

indeterminate progress bar

Finished

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

DoDon't
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!
Menu