Introduction
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.
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 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 the progress bar to that stored value using a dataset.