Progress Bar
The Progress Bar component shows a progress bar that can be used to indicate the progress of lengthy processes.
Example:
Table of contents
The component has the following properties:
| Property | Type | Default | Description |
|---|---|---|---|
| valueText | String | null | When set, the given text is shown inside the progress bar |
| max | Number | 100 | The maximum value of the progress |
| type | String | true | One of "info", "success", "warning", "danger" which controls the color of the bar similar to the bootstrap button colors |
| animate | Boolean | true | When true, changes of the progress are animated |
| showValue | Boolean | true | When true, the value is shown as "value / max"; only used when no valueText is set |
| showValueAsPercentage | Boolean | true | When true, the value is shown as as percentage of max |
| value | Number | null | The current progress; when the progress should be updated while a lengthy process is running, you need to use the API method setProgress() to see the progress updating in the client |
| styleClass | String | null | Optional style class(es) to be set to the component. Add "progress-striped" to get a striped progress bar, "progress-striped active" to get "moving" stripes. Any other style class can be added. To specifically select the progress bar itself, use ".your-style-class > .progress-bar" as selector. To change the progress bar height, the height of the component itself and the line-height of the .progress-bar should be set |
| visible | Boolean | true | The visible property of the component, default true. |
| Method | Params | Return | Description |
|---|---|---|---|
| setProgress | value:Number, valueText:String | Updates the progress, optionally setting the given value text |
Updates the progress, optionally setting the given value text
Params
| Type | Name | Description | Required |
|---|---|---|---|
| Number | value | The current progress | Required |
| String | valueText | When given, this text will be shown inside the progress bar | Optional |
Returns void
The Progress Bar currently has no events.