Progress Bar
Last updated
Last updated
Shows a progress bar based on a certain value between the provided minimum and maximum value.
Minimum
Number, Expression
The minimum value displayed on the progress bar. Any value below the minimum value are not visible on the progress bar, it will show an empty progress bar.
Maximum
Number, Expression
The maximum value displayed on the progress bar. Any value above this value will show a full progress bar.
Value
Number, Expression
Displays the current progress of the progress bar. The current value should be a value between or equal to the minimum and maximum value. The value or current progress is in proportion to the minimum and maximum value and will be displayed on the progress bar.
Unit
Text, Expression
This property displays a label immediately after the value on the progress bar. The property 'Value <number, expression>' can represent a certain unit, this can for example be a percentage or the number of completed steps. Example 1 shows the label " of 100". Examples 2 and 3 are showing the label "%".
Bar color
Text, Expression
Changes the background color of the progress bar using a bootstrap color context. Accepted values: "default", "primary", "success", "info", "warning" and "danger".
Striped
Boolean, Expression
When true: adds oblique thick stripes to the progress bar. View examples 2 and 3 to see a striped progress bar.
Animate
Boolean, Expression
When true: the stripes of a progress bar are animated as shown in example 3. Note: this property only works when 'Striped <boolean, expression>' is set to 'true'.
Font size
Number
The font size of the current value and unit label in pixels.
Bar height
Number
The height of the bar in pixels.
