# Progress Bars

The Progress Bar is a Web Control that can be added to Web Pages. Progress Bars inform users of the completion of a task and the length of a process.

## Adding Progress Bars to Web Pages

In [Web Flows Builder](../../studio/builder-bar/web-flows-builder), go to the first Web Page of your [Web Flow](../../studio/web-flows), click on the **+** icon on the toolbar and search for the Progress Bar Web Control. The Progress Bar will be displayed showing three steps by default:

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-e57a5d3936d4788cb0d3b8246927e5dfcd0fec8d%2Fprogress-bars-v181-0.png?alt=media)

In the **General** tab of the Inspector, under **Control Properties**, the following properties are set:

**Value**: the step the current Web Page is in.\
**Steps**: the number of steps this Progress Bar has.\
**ProgressLabels**: the labels shown by default to identify the progress.

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-054d4523c3518f11cbf43fcf64dbdf4901b4789e%2Fprogress-bars-v181-1.png?alt=media)

## Setting up the Progress Bar values as a Global Variable

In order to use the Progress Bar across the whole [Journey](../../concepts/journeys), a Global [Variable](../../studio/variable-tree) needs to be created.

1. Click on **Variables** at the bottom of the Studio.
2. In **Global Variables**, click on the **+** icon and select a Variable of type `List of Text.`

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-a1fe320af326783b957e716f3b9f5e7f96efdadc%2Fprogress-bars-v181-2.png?alt=media)

3. Change its name to `progress_bar_global.`

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-044f0f82ec11590323113122a284a45b7143254c%2Fprogress-bars-v181-3.png?alt=media)

4. Go to [Connections Builder](../../studio/builder-bar/connections-builder) and select **Journey > Session Started**.
5. In the **General** tab of the Inspector, add a Set Variable Action and pass the recently created Global Variable and, as values, paste here the ones set as ProgressLabels in Web Flows Builder:

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-772c51c22607c2f1309c2f804a9fef4bb310fc81%2Fprogress-bars-v181-4.png?alt=media)

You can add as many steps as needed and also change the labels of the steps to provide a more customized experience:

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-57ad16673ab24da6314d08aae18d653d00a12373%2Fprogress-bars-v181-5.png?alt=media)

## Tying the Global Variable to the Progress Bar

From Web Flows Builder, replace the content on the ProgressLabels property with the Global Variable you created in Journey Builder.

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-dd7120a7903d599789241d5a495db114c83a3763%2Fprogress-bars-v181-6.png?alt=media)

For the Progress Bar to show in every Web Page you need it to be, repeat the process and change Value to accordingly:

* In the second Web Page, change the Value to “2” and add the Global Variable:

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-372bc218297d65c6d7c43b4eb52dc0abfcd00aef%2Fprogress-bars-v181-7.png?alt=media)

* In the third Web Page, change the Value to “3” and add the Global Variable:

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-bc15477380d0f22a33f7163e0ded6f892b18dd2b%2Fprogress-bars-v181-8.png?alt=media)

## Previewing the Progress Bar

Click on **Preview** at the top right of the Studio to see how the Progress Bar fills from Web Page to Web Page:

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-009dd4ea8c9146cce7b50c71ac63d227f90b11a7%2Fprogress-bars-v181-9.png?alt=media)
