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 %>"
/>

Warning progress bar:

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

Complete progress bar:

<clay:progressbar
    status="complete"
/>

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

Related Topics

• Clay Dropdown Menus and Action Menus
• Clay Icons
• Clay Navigation Bars