Progress bar

The Progress Bar element displays animated progress bars with customizable labels, percentages, and styling.

Settings

• Bars (repeater) - Add multiple progress bars. Each bar has:

  • Label (text) - Text label for the progress bar.
  • Percentage (number) - Progress percentage (0-100). Supports dynamic data.
  • Bar color (color) - Color of the progress fill.

• Height (number with units) - Height of the progress bars. Default: 8px.

• Spacing (number with units) - Gap between progress bars. Default: 20px.

• Show percentage (checkbox) - Display percentage values next to labels. Default: checked.

• Bar color (color) - Default color for all progress bars.

• Bar background color (color) - Background color of the progress bar tracks.

• Bar border (border) - Border styling for the progress bars.

• Label typography (typography) - Font settings for the labels.

• Percentage typography (typography) - Font settings for the percentage values. Only shown when “Show percentage” is enabled.

Developer reference

See the Progress Bar Schema for the full JSON schema of this element’s settings and controls.