Progress

The progress component shows on the screen a control that indicates the progress percentage of an on-going operation. The component can be scaled to fit inside a parent container.

The progress component provides the following styles:

Note
If you want to use Circular-shape progressbar, please refer CircleProgressBar component.

The following table describes the supported progress classes.

Table: Popup classes
Class Description
ui-progress-indeterminate Defines the element as a infinite moving progress bar (unknown style).
ui-progress-proportion Defines the element as a text <div> element with a progress proportion.
ui-progress-ratio Defines the element as a text <div> element with progress ratio.

To add a progress component to the application, use the following code:

<!--Infinite move-->
<progress class="ui-progress-indeterminate" max="100" value="100"></progress>

<!--Default-->
<progress max="100" value="90"></progress>

<!--2 elements-->
<progress max="100" value="50"></progress>
<div class="ui-progress-proportion">00/20</div>
<div class="ui-progress-ratio">50%</div>

Where to Go Next