# Progress Bars

### Overview

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.&#x20;

### 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 '+' sign next to it and select the Progress Bar control.

![image3.png](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-1d06f9f87c792a36af1f700919171d027f39190b%2Fprogress-bars-v180-0.png?alt=media)

The Progress Bar will be displayed showing three steps by default.

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-28dd2f649c4441fe78a51aaa75137a2e463c3a0d%2Fprogress-bars-v180-1.png?alt=media)

In the General tab of the Inspector section, under Control Properties, the following are set by default:

**Value:** the step the current Web Page is in.&#x20;

**Steps:** the number of steps this Progress Bar has.&#x20;

**ProgressLabels:** the labels shown by default to identify the progress.&#x20;

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-e56da3103c40b26bf66799aeb2d8d649cc55c1ca%2Fprogress-bars-v180-2.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](../../data-and-integrations/variable-namespaces) needs to be created.

Go to [Journey Builder](../../studio/builder-bar/journey-builder) and in the General tab of the Inspector, add a Global Variable of type List of Text.

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-f583924c02ad54d5660412d9755a855f7ce32680%2Fprogress-bars-v180-3.png?alt=media)

Use transparent wording to rename it.

![organizing info](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-0e81e2efb10066aea9b6ea5754cdf7050b94d71d%2Fprogress-bars-v180-4.png?alt=media)

Then, from Journey Started in the Actions tab, pick the Set Variable option.

![organizing info](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-404093536e5eb4f2be7abfed7cdfb0a3d6580fc0%2Fprogress-bars-v180-5.png?alt=media)

Enter the recently created Global Variable and, as values, paste here the ones set as ProgressLabels in Web Flows Builder. Additional steps can also be added.

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-100186e39b4ab302f025cc01e61886c1b211a33a%2Fprogress-bars-v180-6.png?alt=media)

Also, if you want to provide a more customised experience, you can change the labels of the steps as well:

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-299821b1a9f5bf91e2ebef13b2adedb2e06ced47%2Fprogress-bars-v180-7.png?alt=media)

### Tying the Global Variable to the Progress Bar

From [Web Flows Builder](../../studio/builder-bar/web-flows-builder), replace the content on the ProgressLabels control with the Global Variable you created in Journey Builder.

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

Now, every time you add a Progress Bar control in the application, you can retrieve the same setting using this Global Variable.
