| Prop | Type | Required | Example | Value Range | Description |
|---|---|---|---|---|---|
| progressType | string | true | - | - | The type of progress indicator (e.g., bar, circle). |
| trackColor | string | false | - | - | The color of the progress track, in hex format. |
| trackAlpha | number | false | - | 0 - 1 | The transparency level of the progress track. 1 represents full opacity, and 0 represents full transparency. |
| railColor | string | false | - | - | The color of the progress rail (background), in hex format. |
| railAlpha | number | false | - | 0 - 1 | The transparency level of the progress rail. 1 represents full opacity, and 0 represents full transparency. |
| trackHeight | number | false | - | - | The height of the progress track, in pixels. |
| borderColor | string | false | - | - | The color of the progress border, in hex format. |
| borderAlpha | number | false | - | 0 - 1 | The transparency level of the progress border. 1 represents full opacity, and 0 represents full transparency. |
| borderWidth | number | false | - | - | The width of the progress border, in pixels. |
| labels | array | false | - | - | An array of label objects for the progress indicator. |
Note: The
progressTypedetermines the visual style of the progress indicator, whiletrackColorandrailColordefine the appearance of the progress and background respectively.
1{
2 "id": "progress-element-id",
3 "type": "Progress",
4 "start": 0,
5 "duration": 10,
6 "trackIndex": 0,
7 "x": 100,
8 "y": 100,
9 "progressType": "bar",
10 "trackColor": "#4CAF50",
11 "trackAlpha": 1,
12 "railColor": "#E0E0E0",
13 "railAlpha": 1,
14 "trackHeight": 20,
15 "borderColor": "#000000",
16 "borderAlpha": 1,
17 "borderWidth": 1,
18 "labels": [
19 { "text": "0%", "position": 0 },
20 { "text": "100%", "position": 1 }
21 ]
22}
23