Progress
Ripple UI comes with a progress component that allows you to show the progress of a task.
Default
Simple example of a progress.
HTML
JSX
<progress class="progress" value="50" max="100"></progress>
Colors
You can use different colors to the progress.
HTML
JSX
<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
You can use different colors to the progress.
HTML
JSX
<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
You can have an indeterminate progress.
Since indeterminate progress doesn't work in the same way in all the browsers we suggest using indeterminate class inside a div
HTML
JSX
<!-- 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>
API
| class | Description |
|---|---|
| progress | The progress class |
| progress-primary | The progress class with primary color |
| progress-secondary | The progress class with secondary color |
| progress-success | The progress class with success color |
| progress-warning | The progress class with warning color |
| progress-error | The progress class with error color |
| progress-flat-primary | The progress class with primary color and background with blue color |
| progress-flat-secondary | The progress class with secondary color and background with purple color |
| progress-flat-success | The progress class with success color and background with green color |
| progress-flat-warning | The progress class with warning color and background with yellow color |
| progress-flat-error | The progress class with error color and background with red color |
| progress-indeterminate | The bar of progress will be infinite |