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 API.
Before you begin:
Add the CMS to your site and create a collection that includes a number field type for your progress value.
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.
- Choose whether to set the target value as a dynamic value or a static value:
Dynamic target value
on the Progress Bar element. 
and choose the direction in which the progress moves. 
and choose a preset design or customize the existing design further. Static target value
Did this help?
|