Velo: Working with the Progress Bar Element

A progress bar allows you to visually display the status of an ongoing process. Some common uses for progress bars are to display:

• How much of a process a user 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 user 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.

Progress is measured as a number between 0 and the target value that you set. The current progress status is referred to as the value of the progress bar. The area indicating the progress that has already been made is colored in the foreground color and the remaining area until the target value is colored in the background color. 

API

The progress bar's API allows you to get or set the value and target value. You can also set the styling of the background color, foreground color, border color, and border width. To learn more, see ProgressBar in the API Reference.

1
// Set the target value as 50
2
$w('#myProgressBar').targetValue = 50;
3

4
// Set the progress as 20
5
$w('#myProgressBar').value = 20;

Indicating Progress

To indicate progress in a progress bar, you change the progress bar's value in code. Sometimes you simply change the value to a new value. In other cases, you need to first calculate the new value before setting it. 

Example: Profile Completion

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

Example: Fundraising Goal

Let's say you're using a progress bar to show how much money has been raised. Typically, you need to calculate that value by running an aggregation on a database 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. Or you can perform the aggregation each time a contribution has been made and store that value in a collection. Then, you can connect the progress bar to that stored value using a dataset.