CMS: Adding and Setting Up a Progress Bar
6 min read
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 Element.
Before you begin:
Add the CMS to your site and create a collection that includes a number field for your progress value.
To add and set up a progress bar:
Wix Editor
Editor X
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 the Connect to CMS icon
on the Progress Bar element.
- Click the Choose a dataset drop-down and select an existing dataset that connects to your collection. Alternatively, click Create Dataset, then choose the collection you want to connect, give the dataset a name and click Create.
- Click the Progress value connects to drop-down and select the field you want to use to represent progress toward reaching the target goal.
- Set the target value as either a static number that always remains the same or as a dynamic value:
- Set static target value: Click Set Target Value on the Progress Bar element and enter the value in the Target value field.
- Set dynamic target value: Click the Target value connects to drop-down and select the field you want to use to represent the target goal.
- Click the Layout icon
and choose the direction in which the progress moves.
- Click the Design icon
and choose a preset design or customize the existing design further.
- (Optional) Click the Animation icon
to add an animation effect to the element.