Progress
The Progress object displays a progress bar.
It can be used to show the progress of a task.
Attributes
Common
ID
Sets the object's ID.
The ID identifies the object and is used to reference it in UISet actions, allowing to change its attributes dynamically.
The ID is not unique, it can be shared among multiple objects to quickly change a common attribute.
IDs can't be changed with a UISet action, but they can have a Value Binding assigned to them. Value Bindings on IDs allow an object to be dinamically attached to a set of attribute values.
E.g. the following Value Binding switches the ID of the object between mybutton1 and mybutton2 based on the value of the UISet button.address:
Value binding:
="mybutton" + ui('button', 'address')
UISet:
UISet('button', 'address', '1') switches the ID to mybutton1
UISet('button', 'address', '2') switches the ID to mybutton2
Position and Size
Position
Sets the object's position.
Attribute Values
| Value | Description | Example |
|---|---|---|
| x<left>y<top> | Specify left/top coordinates in pixels. | x10y20 |
This attribute is available when parent's layout is neither "flex" nor "grid".
When parent's layout is neither "flex" nor "grid", this attribute defaults to x0y0.
Flex Grow
Specifies if the objects should grow to fill the available space.
Attribute Values
| Value | Description |
|---|---|
| false | Default value. Objects do not grow to fill the available space. |
| true | Objects expand to fill the available space. |
This attribute is available when parent's layout is "flex".
The default value is: false.
Flex Shrink
Specifies if the objects should shrink to fit the available space.
Attribute Values
| Value | Description |
|---|---|
| false | Default value. Objects do not shrink to fit the available space. |
| true | Objects shrink to fit the available space. |
This attribute is available when parent's layout is "flex".
The default value is: false.
Column
Specifies the starting column of the object inside a grid container.
Minimum value is 1.
Attribute Values
| Value | Description |
|---|---|
| <int> | Column index starting from 1. |
This attribute is available when parent's layout is "grid".
This attribute is experimental. It might not work properly and it might be modified or removed in a future release.
Column Span
Specifies how many grid columns the object spans.
Minimum value is 1.
Attribute Values
| Value | Description |
|---|---|
| <int> | Column span starting from 1. |
This attribute is available when parent's layout is "grid".
When parent's layout is "grid", this attribute defaults to 1.
This attribute is experimental. It might not work properly and it might be modified or removed in a future release.
Row
Specifies the starting row of the object inside a grid container.
Minimum value is 1.
Attribute Values
| Value | Description |
|---|---|
| [empty] | Auto placement by the grid. |
| <int> | Row index starting from 1. |
This attribute is available when parent's layout is "grid".
When parent's layout is "grid", this attribute defaults to auto.
This attribute is experimental. It might not work properly and it might be modified or removed in a future release.
Row Span
Specifies how many grid rows the object spans.
Minimum value is 1.
Attribute Values
| Value | Description |
|---|---|
| <int> | Row span starting from 1. |
This attribute is available when parent's layout is "grid".
When parent's layout is "grid", this attribute defaults to 1.
This attribute is experimental. It might not work properly and it might be modified or removed in a future release.
Width
Sets the object's width in pixels.
Minimum width is 100 when type is not "circular".
Minimum width is 20 when type is "circular".
Height
Sets the object's height in pixels.
Minimum height is 16 when type is not "circular".
Minimum height is 20 when type is "circular".
Type
Type
Specifies the type of the progress bar.
Attribute Values
| Value | Description |
|---|---|
| bar | Default value. Horizontal progress bar. |
| circular | Circular progress bar. |
The default value is: bar.
Value
Value
Specifies the current value of the progress bar.
Attribute Values
| Value | Description |
|---|---|
| <int> | Current value. |
The default value is: 0.
Max Value
Specifies the maximum value of the progress bar.
Attribute Values
| Value | Description |
|---|---|
| <int> | Maximum value. |
The default value is: 100.
Status
Specifies the status of the progress bar.
active displays an animation over the progress bar.
success and error display icons in place of the value label.
auto chooses the status depending on the current value:
activeif the value is less than the maximum valuesuccessif the value is equal to the maximum valueerrorif the value is less than 0
Attribute Values
| Value | Description |
|---|---|
| auto | Default value. Chooses status depending on the current value. |
| idle | Idle status, no animation. |
| active | Active status, displays an animation. |
| success | Success status, displays a checkmark icon. |
| error | Error status, displays a cross icon. |
The default value is: auto.
Description
Specifies a description label that appears below the bar or inside the circle.
Attribute Values
| Value | Description |
|---|---|
| <string> | Description label. |
Style
Color
Specifies the color of the progress bar.
The default value is: auto.
Show Percentage
Specifies whether the current percentage is shown.
Attribute Values
| Value | Description |
|---|---|
| true | Default value. Current value is shown. |
| false | Current value is not shown. |
The default value is: true.
Typography
Font Family
Specifies the font family.
The default value is: default.
Font Size
Specifies the font size in pixels or percentage (relative to the project's font size).
Attribute Values
| Value | Description | Example |
|---|---|---|
| <integer> | Font size in pixels. | |
| <percentage>% | Relative font size in percentage. | 90% |
Default behavior:
- By default, this attribute defaults to
14. - Otherwise, this attribute defaults to
auto.
Font Color
Specifies the text CSS color.
Attribute Values
| Value | Description | Example |
|---|---|---|
| <html color> | Color in any html accepted format. | #ff0000 |
Font Weight
Specifies the weight of the font.
Attribute Values
| Value | Description |
|---|---|
| normal | Default value. Normal. |
| bold | Bold. |
| bolder | Bolder. |
| lighter | Lighter. |
The default value is: normal.
Italic
Show the text in italics.
Attribute Values
| Value | Description |
|---|---|
| false | Default value. Normal. |
| true | Italics. |
The default value is: false.
Small Caps
Sets the font to small caps.
Attribute Values
| Value | Description |
|---|---|
| false | Default value. Normal. |
| true | Small caps. |
The default value is: false.
Decoration
Specifies the text decoration.
Attribute Values
| Value | Description |
|---|---|
| none | Default value. No decoration. |
| underline | Underline. |
| overline | Overline. |
| line-through | Line through. |
The default value is: none.
View
Visible
Sets the object's visibility.
Attribute Values
| Value | Description |
|---|---|
| true | Default value. Visible. |
| false | Hidden. |
The default value is: true.
Enabled
Specifies if the object is enabled or disabled. A disabled object appears as grayed out and can't be interacted with.
Attribute Values
| Value | Description |
|---|---|
| true | Default value. Enabled. |
| false | Disabled. |
The default value is: true.
Blink
Blinks the object at the specified speed.
Attribute Values
| Value | Description |
|---|---|
| false | Default value. Not blinking. |
| slow | Blinks slowly. |
| fast | Blinks fast. |
The default value is: false.
Transition
Specifies the transition effect when the object is shown or hidden.
Attribute Values
| Value | Description |
|---|---|
| none | Default value. No transition. |
| fade | Fade in/out. |
| fade-left | Slide from left and fade in/out. |
| fade-right | Slide from right and fade in/out. |
| fade-up | Slide from top and fade in/out. |
| fade-down | Slide from bottom and fade in/out. |
| slide-left | Slide from left. |
| slide-right | Slide from right. |
| slide-up | Slide from top. |
| slide-down | Slide from bottom. |
| zoom-in | Zoom in. |
| zoom-out | Zoom out. |
| 3d-flip-left | 3D flip from left. |
| 3d-flip-right | 3D flip from right. |
The default value is: none.
This attribute is experimental. It might not work properly and it might be modified or removed in a future release.
Transition Duration
Specifies the transition duration in milliseconds.
Attribute Values
| Value | Description |
|---|---|
| <integer> | Duration in milliseconds. |
This attribute is available when transition is not "none".
When transition is not "none", this attribute defaults to 300.
This attribute is experimental. It might not work properly and it might be modified or removed in a future release.
Transition Delay
Specifies the transition delay in milliseconds.
Attribute Values
| Value | Description |
|---|---|
| <integer> | Delay in milliseconds. |
This attribute is available when transition is not "none".
When transition is not "none", this attribute defaults to 0.
This attribute is experimental. It might not work properly and it might be modified or removed in a future release.
Opacity
Sets the object's opacity. Opacity is the degree to which content behind an object is hidden.
Attribute Values
| Value | Description |
|---|---|
| 0 | The object is fully transparent. |
| >0.0, <1.0 | The object is translucent (content behind the element can be seen). |
| 1.0 | Default value. The object is fully opaque. |
The default value is: 1.0.
Rotation
Specifies the degrees by which the object is rotated. A positive number rotates it clockwise, while a negative value rotates it counter-clockwise.
The default value is: 0.
CSS Class
Specifies a CSS Class that applies to the object, useful to customize its appearance. Custom CSS Classes are specified within the custom.css file.
Margin
Specifies the margin of the object. The margin is the space outside the object's border.
Attribute Values
| Value | Description | Example |
|---|---|---|
| <int> | Specify the margin in pixels for all sides of the object. | |
| <top> <right> <bottom> <left> | Specify the margin in pixels for each side of the object. | 10 20 30 40 |
This attribute is experimental. It might not work properly and it might be modified or removed in a future release.
View Scale
Specifies the scale of the object. The scale is the ratio between the object's size and the size of the view it is contained in.
Attribute Values
| Value | Description |
|---|---|
| <float> | Specify the scale for both width and height of the object. |
The default value is: 1.0.
This attribute is experimental. It might not work properly and it might be modified or removed in a future release.
Meta
Comment
Specifies a comment, visible only in the Project Editor. It can be used to add a note or a tag to the object. The filter in the object's SELECT panel applies to the comment as well.
This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.
Exclude
Excludes the object from the UI. Useful to temporarily hide an object without deleting it. Different from the "Visible" attribute, which hides the object in the UI but keeps it in the project, allowing it to be shown again with a UISet.
Attribute Values
| Value | Description |
|---|---|
| false | Default value. Object is included in the UI. |
| true | Object is excluded from the UI. |
The default value is: false.
This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.