Progress
Classes Information
| ClassName | Description |
|---|---|
| progress | Base Class |
| progress-primary | primary color |
| progress-secondary | secondary color |
| progress-success | success color |
| progress-warning | warning color |
| progress-error | error color |
| progress-flat-primary | primary color and background with blue color |
| progress-flat-secondary | secondary color and background with purple color |
| progress-flat-success | success color and background with green color |
| progress-flat-warning | warning color and background with yellow color |
| progress-flat-error | error color and background with red color |
| progress-indeterminate | The bar of progress will be infinite |
Basic Usage
Example Code
html
<progress class="progress" value="50" max="100"></progress>Colors
Example Code
html
<progress class="progress progress-primary" value="50" max="100"></progress>
<progress class="progress progress-secondary" value="50" max="100"></progress>
<progress class="progress progress-success" value="50" max="100"></progress>
<progress class="progress progress-warning" value="50" max="100"></progress>
<progress class="progress progress-error" value="50" max="100"></progress>Flat
Example Code
html
<progress class="progress progress-flat-primary" value="50" max="100"></progress>
<progress class="progress progress-flat-secondary" value="50" max="100"></progress>
<progress class="progress progress-flat-success" value="50" max="100"></progress>
<progress class="progress progress-flat-warning" value="50" max="100"></progress>
<progress class="progress progress-flat-error" value="50" max="100"></progress>Indeterminate
Example Code
html
<!-- This will work on Edge or Chrome -->
<progress class="progress"></progress>
<progress class="progress progress-flat-primary"></progress>
<progress class="progress progress-flat-error"></progress>
<!-- For Safari, Firefox or Any other browser -->
<div class="progress progress-indeterminate"></div>