Version 3.0.6

Progress Bars

Progress bars are used to give the user visual feedback on the activity and status of an action. See also: Loading.

When progress bars are determinate they indicate how long an operation will take when the percentage complete is detectable. A linear progress indicator should always fill from 0% to 100% and never decrease in value.

                      
<div class="loading-bar-wrapper loading-bar-default">
<progress max="100" value="30"></progress>
</div>

When indicators are indeterminate they request that the user wait while something finishes when it’s not necessary to indicate how long it will take.

                      
<div class="loading-bar-wrapper loading-bar-indeterminate">
<progress></progress>
<div class="loader"></div>
</div>

Validation can be used within the progress bar to indicate to the user when success or failure has been achieved. Examples include failure to upload a file or indicating success at reaching a goal.

                           
<div class="loading-bar-wrapper loading-bar-success">
<progress max="100" value="100"></progress>
</div>
<div class="loading-bar-wrapper loading-bar-warning">
<progress max="100" value="100"></progress>
</div>

Search Results

Powered by