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).

The following table describes the supported progress classes.

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>