Help Center
    Home
  1. Creating your site
  2. Advanced features
  3. CMS
  4. Connecting user input elements to the CMS
    5. CMS: Adding and Setting Up a Progress Bar

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
  1. Go to your Editor.
  2. Make sure you have enabled Velo in your Editor: 
    1. Click Dev Mode at the top.
    2. Click Turn on Dev Mode. 
  3. Click Add Elements  on the left side of the Editor.
  4. Click Interactive. 
  5. Click Progress Bar under Indicators. 
  6. Click and drag the Progress Bar of your choice onto the page. 
  7. Click the Connect to CMS icon on the Progress Bar element. 
  8. 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.
  9. Click the Progress value connects to drop-down and select the field you want to use to represent progress toward reaching the target goal.
  10. 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.
  11. Click the Layout icon  and choose the direction in which the progress moves. 
  12. Click the Design icon  and choose a preset design or customize the existing design further. 
  13. (Optional) Click the Animation icon  to add an animation effect to the element. 

Related Content

CMS: About User Input Elements
CMS: Troubleshooting User Input Elements Issues

Hire a Professional

Get matched with a Wix Partner who can help you reach your site goals.
Get Matched