---
title: "Progress bar"
description: "The Progress Bar element displays animated progress bars with customizable labels, percentages, and styling."
canonical: "https://academy.bricksbuilder.io/builder/elements/general/progress-bar/"
markdownUrl: "https://academy.bricksbuilder.io/builder/elements/general/progress-bar.md"
pageType: "article"
section: "builder"
category: "elements"
lastmod: "2026-05-21T13:58:32.000Z"
---
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.

:::tip[Developer reference]
See the [Progress Bar Schema](/developer/schema/elements/progress-bar/) for the full JSON schema of this element's settings and controls.
:::