> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://www.glideapps.com/docs/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://www.glideapps.com/docs/_mcp/server.

# Progress Bar

> Display the progress of a value between two limits.

The **Progress Bar** component will show a bar that is partially filled based on how far a value has progressed toward the maximum possible value.

## Setting up a Progress Bar

#### Progress Bar Arcade

In the [Layout Editor](/docs/getting-started/intro-to-layout), select the tab you want to edit.

Click on the plus (+) symbol in the [Components](/docs/essentials/components) panel.

Select the **Progress Bar** component.

Choose the [Data Source](/docs/essentials/data-sources) where your values are stored.

Select the column that should affect the progress bar's current status in the **Value** field.

Set the minimum and maximum values. By default, Glide fills these fields with 0 as the minimum and 100 as the maximum.

Give the progress bar a **Title** and **Description**.

Choose **Colors** for the progress bar. These can be written-out in English, hex codes, or multiple options in a comma separated list.

**Hide Value** will either show or hide the total value of the item being measured by the progress bar.

**Formatted Value** will choose which value to show in the upper right of the progress component.

### Creating Dynamic Progress Bars

You can choose the minimum and maximum values from columns in your data source and create a dynamic progress bar. These two columns are then tied to the minimum and maximum of the progress bar, and the progress bar will change if the values in these columns change.