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:

  • If you implement the ui-progress-indeterminate class, you show an image that looks like an infinite move.
  • If you implement no class, you show the default progress style.
  • If you implement a div element that can choose 2 classes (ui-progress-proportion or ui-progress-ratio) and a progress element on the same level, you show two elements on the screen (the proportion information is located left below and the ratio information is located right below).
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