Skip to content
Bricks Academy
Community Forum
Get Bricks

Progress bar

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

Settings

Section titled “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.