Progress Bar
Usage
Progress bars display the completion status of a task or process. They can be linear or segmented, and support both determinate (0-100%) and indeterminate (looping) modes.
YAML Export
1. Copy the YAML from the component view.
2. Paste it into your Canvas app.
3. Bind the Text property to show the current value (e.g., Text: varProgress & "%").
4. Bind the Width property to reflect progress (e.g., Width: varProgress * 3).
Value Range
- Determinate mode: Value should be between 0-100.
- Indeterminate mode: Value is ignored; shows looping animation instead.
Indeterminate Mode
Use indeterminate mode when:
- The task duration is unknown
- You want to show activity without specific progress
- The operation is in progress but completion time is uncertain
Examples
Basic Progress Bar
ProgressBar1:
As: label
Text: "65%"
Height: 8
Width: 300
Fill: RGBA(37, 99, 235, 1)
With Variable Binding
ProgressBar1:
As: label
Text: varProgress & "%"
Width: varProgress * 3
Height: 8
Fill: RGBA(37, 99, 235, 1)
Indeterminate Progress
ProgressBar1:
As: label
Text: ""
Height: 8
Width: 300
Fill: RGBA(37, 99, 235, 1)
// Use animation or custom control for indeterminate effect
Export Modes
- Safe: Basic progress bar with value display.
- Advanced: Includes segmented style, stripe effects, animations, and indeterminate support (Pro feature).