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

classDescription
progressThe progress class
progress-primaryThe progress class with primary color
progress-secondaryThe progress class with secondary color
progress-successThe progress class with success color
progress-warningThe progress class with warning color
progress-errorThe progress class with error color
progress-flat-primaryThe progress class with primary color and background with blue color
progress-flat-secondaryThe progress class with secondary color and background with purple color
progress-flat-successThe progress class with success color and background with green color
progress-flat-warningThe progress class with warning color and background with yellow color
progress-flat-errorThe progress class with error color and background with red color
progress-indeterminateThe bar of progress will be infinite