CMS: Adding and Setting Up a Progress Bar
8 min
Add a progress bar to show a visual representation of progress toward achieving a goal. You can use Velo coding or a CMS collection field to represent the progress value. For the target value, you can set a static value that doesn't change, or set a dynamic value with Velo or by connecting a collection field.
Examples of using progress bars:
- Show how many tasks are marked as 'done' on a to-do list.
- Show the percentage of steps completed during an onboarding process.
- Show the amount of money raised towards a fundraising goal.
- Show the number of people who have signed a petition that needs a certain number of votes.
Tip:
You can use Velo to update the progress bar's value without connecting to the CMS. To learn how, see Working with the progress bar API.
Before you begin:
Add the CMS to your site and create a collection that includes a 'Number' field type for your progress value. If you want to use a dynamic value for the target value, also add a 'Number' field that represents the target.
To add and set up a progress bar:
Wix Editor
Studio Editor
- Go to your editor.
- Make sure you have enabled Velo in your editor:
- Click Dev Mode at the top.
- Click Turn on Dev Mode.
- Click Add Elements
on the left side of the editor. - Click Interactive.
- Click Progress Bar under Indicators.
- Click and drag the progress bar of your choice onto the page.
- Click Settings on the progress bar.
- Enter a Label that lets visitors and screen readers know what the bar represents (e.g. "Progress toward goal")
- Choose whether to set the target value as a dynamic value or a static value:
Dynamic target value
on the progress bar element. 
to edit customize the layout of the bar:
and choose a preset design or customize the existing design further. Static target value
