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 Navigation BarsClay Stickers »
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています