Clay Progress Bars

Documentation Menu
Go Back

Clay Progress Bars

You can add progress bars to your app with the clay:progressbar tag. These indicate the completion percentage of a task and come in three status styles: default (blue), warning (red), and complete (green with checkmark). You can provide a minimum value (minValue) and a maximum value (maxValue).

Default progress bar:

<clay:progressbar
    maxValue="<%= 100 %>"
    minValue="<%= 0 %>"
    value="<%= 30 %>"
/>

You can include progress bars in your apps.

Warning progress bar:

<clay:progressbar
    maxValue="<%= 100 %>"
    minValue="<%= 0 %>"
    status="warning"
    value="<%= 70 %>"
/>

Warning progress bars indicate that the progress has not completed due to an error.

Complete progress bar:

<clay:progressbar
    status="complete"
/>

The complete progress bar indicates the progress is complete.

Clay taglibs make it easy to track progress in your apps.

Not finding what you're looking for?

Pardon our dust as we revamp and transition our product documentation to this site. If something seems missing, please check Liferay Help Center documentation for Liferay DXP 7.2 and previous versions.

Try Liferay's Help Center