Progress Bar

A linear progress bar that animates from 0% to 100% over a duration, with optional checkpoints that pause the animation.

Progress Bar Insert image: A Progress Bar component on the canvas showing a horizontal bar partially filled, with the property panel on the right displaying duration, colors, and checkpoint configuration

Properties

Property	Description
`progressDuration`	Total duration in milliseconds.
`progressTrackColor`	Background track color.
`progressFillColor`	Fill/progress color.
`progressCheckpoints`	JSON array of checkpoints (see below).
`progressAutoStart`	Start automatically on mount.
`progressPausedVariableId`	Variable ID to pause/resume (boolean).
`progressValueVariableId`	Variable ID that receives the current progress value (0–100).
`progressCompletionActions`	Actions to execute when progress reaches 100%.

Checkpoints

Checkpoints pause the progress bar at specific percentages and optionally trigger click actions:


[
  { "id": "cp1", "percentage": 50, "pause": true, "actions": [] },
  { "id": "cp2", "percentage": 100, "pause": false, "actions": [] }
]

Use checkpoints to create staged loading screens — pause at 50% to show a message, then resume to completion.

Element Variable

The current progress value (0–100) is available via element.{componentId}.value.