# Progress bar

## Overview

A simple horizontal progress bar block driven by a **Value** between 0 and 100. Use it for static milestones, campaign progress, or connect **Value** to a product or page metafield so the fill updates per product or context. This block is separate from the [cart progress bar](/slab/content/blocks/cart/progress-bar.md), which calculates progress from cart totals and tiers.

## Common use cases

* Show completion toward a goal (for example fundraising or a multi-step story)
* Pair **Value** with a metafield for per-product readiness or capacity
* Match bar height and colors to surrounding sections

## Compatible blocks

This block does not accept nested blocks.

## Block settings

### General

| Setting                | Description                             | Options                   |
| ---------------------- | --------------------------------------- | ------------------------- |
| Show advanced settings | Reveals device visibility for the block | Checkbox (default: false) |

### Content

| Setting | Description                                    | Options                                                                  |
| ------- | ---------------------------------------------- | ------------------------------------------------------------------------ |
| Value   | Fill level for the bar (clamped between 0–100) | Text (default: 50). Use a number or a dynamic source such as a metafield |

### Spacing

| Setting                   | Description                                | Options                                                                      |
| ------------------------- | ------------------------------------------ | ---------------------------------------------------------------------------- |
| Enable horizontal padding | Adds horizontal padding around the bar     | Checkbox (default: false)                                                    |
| Enable top padding        | Adds top padding above the bar             | Checkbox (default: false)                                                    |
| Enable bottom padding     | Adds bottom padding below the bar          | Checkbox (default: false)                                                    |
| Gap size                  | Space between the bar and other flex items | <p>• None<br>• Default (default)<br>• XS<br>• SM<br>• MD<br>• LG<br>• XL</p> |

### Color

| Setting      | Description                                           | Options                                                                                                                                         |
| ------------ | ----------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| Type         | Use theme base colors or a custom scheme for the fill | <p>• Custom<br>• Base (default)</p>                                                                                                             |
| Bar (custom) | Color scheme for the filled portion                   | <p>Color scheme picker<br><br>Visible when type is <strong>Custom</strong></p>                                                                  |
| Bar (base)   | Base color token for the fill                         | <p>• Body background<br>• Body foreground (default)<br>• Accent 1–3<br>• Shade 1–3</p><p><br><br>Visible when type is <strong>Base</strong></p> |

### Layout

| Setting | Description   | Options                         |
| ------- | ------------- | ------------------------------- |
| Height  | Bar thickness | 2–24 px, step 2 (default: 8 px) |

### Display

| Setting    | Description                     | Options                                                                                                                                    |
| ---------- | ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| Visibility | Device visibility for the block | <p>• All devices (default)<br>• Mobile only<br>• Desktop only</p><p><br><br>Visible when <strong>Show advanced settings</strong> is on</p> |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.brickspacelab.com/slab/content/blocks/basics/progress-bar.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.