> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: $w

## Namespace: progress-bar

## Article: Introduction

## Article Link: https://dev.wix.com/docs/velo/velo-only-apis/$w/progress-bar/introduction.md

## Article Content:

# Introduction
A [progress bar](https://support.wix.com/en/article/cms-adding-and-setting-up-a-progress-bar) allows you to visually display the status of an ongoing process. 

For example you might use progress bars to indicate:

- How much of a process a site visitor has completed.
    - How many stages of a purchase process have been completed.
    - How many tasks are marked as done on a to-do list.
    - Percentage completed of a site visitor profile. 
- How much progress has been made towards a goal.
    - The amount of money raised towards a fundraising goal.
    - The number of people who signed a petition.

## Measuring and viewing progress

Progress is measured as a number between 0 and the target value that you set. 

- The **value** is the indication of the current progress status in the progress bar. 
- The **target value** is the indication of the end goal or completed process in the progress bar.
- The area indicating the progress that has already been made is colored in the foreground color. 
- The remaining area until the target value is colored in the background color. 

<div style=text-align:center>

![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/dfff8cbb-ddcb-4376-8cae-3fedb2dd4458/2019/07/16/e054245d-5ce0-4654-8118-0bc66e8eaff3/b3bcaa83-ad1b-47d1-b46b-a23d5d0e5ac6.png)

</div>


## Customizing the progress bar with code

The progress bar's API allows you to: 

* Get or set the value and target value. 
* Set the styling of the background color, foreground color, border color, and border width. 

## Indicating progress with code

To indicate progress in a progress bar, change the progress bar's value in code. 

- Sometimes you can simply change the value to a new value. See the Profile Completion example below.
- In other cases, you need to first calculate the new value before setting it. See the Fundraising Goal example below.

**Profile completion**

Let's say you're using a progress bar to indicate how much of a profile a site visitor has completed. After every step the site visitor completes you can change the progress bar's value to one more than the current value. 

**Reaching a fundraising goal**

Let's say you're using a progress bar to show how much money has been raised. Typically, you calculate that value by [running an aggregation](https://dev.wix.com/docs/develop-websites/articles/databases/wix-data/aggregations/working-with-aggregations-in-the-data-api.md) on a CMS collection where you store individual contributions as items. Then use the result of the aggregation to set the value in the progress bar. 

You can do this: 
- On-the-fly, when displaying the progress bar using only code. 
- Perform the aggregation each time a contribution has been made and store that value in a collection. Then you can [connect](https://support.wix.com/en/article/connecting-page-elements-to-a-dataset) the progress bar to that stored value using a dataset.

## See also

- [Adding and Setting Up a Progress Bar](https://support.wix.com/en/article/cms-adding-and-setting-up-a-progress-bar)