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

Figure 1: You can include progress bars in your apps.

Figure 1: You can include progress bars in your apps.

Warning progress bar:

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

Figure 2: warning progress bars indicate that the progress has not completed due to an error.

Figure 2: warning progress bars indicate that the progress has not completed due to an error.

Complete progress bar:

<clay:progressbar 
    status="complete" 
/>

Figure 3: The complete progress bar indicates the progress is complete.

Figure 3: The complete progress bar indicates the progress is complete.

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

Clay Dropdown Menus and Action Menus

Clay Icons

Clay Navigation Bars

« Clay Navigation BarsClay Stickers »
¿Fue útil este artículo?
Usuarios a los que les pareció útil: 0 de 0