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

> ## 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.