| 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