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