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.
HTML
JSX
<progress class="progress progress-indeterminate"></progress><progress class="progress progress-flat-primary progress-indeterminate"></progress><progress class="progress progress-flat-error progress-indeterminate"></progress>
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 |