---
title: "Progress Bar Overview"
slug: "progress-bar"
tags: ["User Experience", "Progress Tracking"]
updated: 2025-06-25T14:51:59Z
published: 2025-06-25T14:51:59Z
canonical: "documentation.decisions.com/progress-bar"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.decisions.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Progress Bar Overview

## Overview

**Progress** **Bar** components allow users to track the amount of work done or where a project is in terms of completion. Like many other Form components, the Progress Bar's numerical value may be mapped statically or dynamically in additional **Flow** steps.

The following example demonstrates adding and configuring a Progress Bar on a Form in Decisions.

Additional Progress Tracking Method To track Form progress without numerical values, see [Adding a Timeline to a Series of Forms.](https://documentation.decisions.com/v9/docs/adding-a-timeline-to-a-series-of-forms)

---

## Example

To add a Progress Bar to an employment application Form that is mid-way through the process:

1. From the **Decisions** **Studio**, select CREATE FLOW from the **Global** **Action** **Bar**, then CREATE a new **Flow**.
2. From the **Flow** **Designer**, attach a Create Data step from the FAVORITE STEPS category of the **Toolbox** tab.
3. From the **Properties** tab of the newly added step, select SHOW EDITOR.![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-06-23_16h13_48.png)
4. From the **Data** **to** **Create** window, provide a NAME, and select **Double** from the TYPE drop-down. **Constant** map the level of completion (in this case, "40"), then **Save** and close the window.![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-06-23_16h14_55.png)
5. Attach a **Show** **Form** step to the **Create Data** step; select PICK OR CREATE FORM from the Properties tab, then CREATE a new **Form**.![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-06-23_16h15_51.png)
6. Design the Form by providing a **Text** **Box** labeled "Email Address", a **Button** labeled "Submit", and a **Progress** **Bar** component. From the Properties tab of the Progress Bar, change the **Max** value to "100". Then Save and close the Form. 

![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-06-25_10h42_48.png)
7. From the Flow Designer, select the Show Form step's Properties, and map the OUTPUT from the Create Data step to the Progress Bar's INPUT. Then, set the **Email** **Address** Text Box to **Ignore**. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-06-25_10h43_21.png)
8. From **Toolbox > DATA > NUMBERS**, attach an **Add** step to the Submit path of the Form step. Map the Create Data step's **Output** to **Value1**, then Constant map "10" to **Value2**.

![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-06-25_10h44_41.png)
9. Attach an additional Show Form step to the **Done** path of the Add step, select PICK OR CREATE FORM, then CREATE another Form.
10. Design this Form similar to the first by providing a Submit Button, a Progress Bar with the Max set to 100, and another Text Box. Label the Text Box "Phone Number", then Save and close the Form. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-06-25_10h48_13.png)
11. Back in the Flow Designer, connect Submit to the **End** step. Then, select the newly configured Form and map **Add_Output** to the Progress Bar; set **Phone** **Number** to Ignore.
12. Save the Flow, then if desired, close via **X**. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-06-25_10h48_56.png)

---

## Debug

1. From the **Flow** **Designer**, select the **Debug** link from the top Action bar. Then click START DEBUGGING.
2. Fill out the first **Form,** then click the Submit **Button**. 

![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-06-25_10h50_49.png)
3. Proceed with filling out the second Form, click Submit to submit the **Input,** and close the Form.![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-06-25_10h51_27.png)
4.