---
title: "Progress indicators and loaders"
description: "Show step progress and busy states in a flow."
---

The **Progress** category provides two element types — one for step-based progress through a multi-screen flow, and one for in-place busy indicators.

## Progress indicators

### Indicator styles

A **Progress** element shows the user's position in a multi-screen flow. The category provides three visual variants:

- **Linear** — A single bar that fills as the user advances.
- **Segmented** — Separate bars for each step that fill one by one.
- **Connectors** — Labeled circles connected by lines (e.g., Step 1, Step 2, Step 3 in sequence).

### Match steps to screens

By default, the Progress Indicator tracks every screen in the flow. To restrict it to a subset, pick from the **Screens** dropdown. Alternatively, open the screen you want to exclude, and uncheck the **Include screen in progress indicator** checkbox.

Toggle **One segment per screen** off if you need finer control over the step count.

:::warning
Step position follows the screen list — not the order the user actually sees. In non-linear flows, the indicator's displayed step can jump ahead or backtrack.
:::

### Step states

Each step has three states — **Completed**, **Current**, and **Upcoming**. Select a step inside the Progress Indicator to edit a state's styling in the right panel. Use **Apply changes to all states** to copy your edits to the other two.

Editing one step affects every step inside the same indicator.

### Layout and positioning

The Progress indicator is a global element, so you can't place it inside a [container](builder-containers). You also can't set its position — it uses absolute positioning by default. When the user scrolls the screen, the indicator stays in place and the content scrolls beneath it.

To control the space around the indicator, use the **Margin** and **Padding** controls in the **Spacing** section instead of moving the element. If the layout looks wrong, adjust the margin or padding on both the indicator and its neighboring element.

## Loaders

A **Loader** is an animated element that suggests that work is happening: for example, processing a user's quiz answers to prepare a personalized plan.

The category provides three templates:

- **Spinner** — A circular spinner.
- **Spinner with label** — A circular spinner with a caption (e.g., "Loading...").
- **Loader** — A horizontal bar that fills as the work progresses.
{/* - **Loader with label** — A horizontal bar with a caption and percentage (e.g., "Analyzing... 47%"). */}

:::warning
A loader requires a **trigger** to appear and disappear. Open the **Interactions** tab to set up this logic — for example, show it after the user submits a quiz.
:::