ProgressBar

The ProgressBar widget shows how much of a measurable task has been completed. Use it for file uploads, completed lessons, profile completion, or tasks finished toward a goal.

Choose a circular or linear shape, then provide a Progress Value between 0.0 and 1.0. For example, 0.68 displays 68% progress.

Adding a ProgressBar Widget

1. Add the ProgressBar widget from Base Elements in the Widget Palette.
2. Select the widget and open the Properties Panel.
3. Under Progress Bar Properties, set Progress Bar Shape to Circular or Linear.
4. Set Progress Value to a value between 0.0 and 1.0, or set it from a variable.
5. Optionally, use Text to display a label such as 68% or 17 of 25.

The following walkthrough demonstrates how to add and configure the widget:

Setting the Progress Value

Using a Fixed Value

Enter a decimal from 0.0 to 1.0 in Progress Value:

Progress Value	Displayed progress
0.0	0%
0.25	25%
0.7	70%
1.0	100%

Using a Dynamic Value

To update the ProgressBar from app data:

1. Select Set from Variable beside Progress Value.
2. Choose the numeric variable that represents the progress, such as page state, component state, app state, an action output, or backend data.
3. Ensure the resulting value is between 0.0 and 1.0.

If your source stores a percentage as a number between 0 and 100, divide it by 100 before using it. For example, convert 68 to 0.68.

For completed items, calculate progress as:

completedItems / totalItems

For example, 17 / 25 produces 0.68. When the total is 0, return 0 to avoid dividing by zero. Keep the final value within the 0.0 to 1.0 range.

Customizing the ProgressBar

Select the widget and open Progress Bar Properties in the Properties Panel.

Shared Properties

• Progress Bar Shape: Switches between Circular and Linear.
• Progress Value: Sets the completed portion from 0.0 to 1.0.
• Animate Progress: Animates the bar from empty to its configured value when it appears.
• Progress Color: Sets the color of the completed portion.
• Background Color: Sets the color of the remaining portion.
• Text: Displays supporting text in the center of the ProgressBar. Use the text-style controls to customize its appearance.

Circular ProgressBar

• Diameter: Sets the overall width and height of the circle. Use PX for a fixed size or % for a size relative to the available space in its parent or on the screen.
• Thickness: Sets the width of the circular track.
• Start Angle (degree): Sets where the progress begins. For example, 0 starts at the top, 90 starts at the right, and 180 starts at the bottom.

Linear ProgressBar

• Width: Sets the horizontal size of the bar. Use PX for a fixed size or % for a size relative to the available space in its parent or on the screen.
• Thickness: Sets the height of the bar.
• End Radius: Rounds the ends of the bar. Increase the value for more rounded ends.

Best Practices

• Display a meaningful label or percentage when users need the exact progress value.
• Do not rely on color alone. Pair it with text that explains what is progressing.
• Maintain sufficient contrast between Progress Color, Background Color, and the surrounding interface.
• Keep dynamic values between 0.0 and 1.0 so the displayed progress remains accurate.
• Prevent division by zero when calculating progress from completed and total values.
• Use a loading indicator instead of an invented percentage when progress cannot be measured.