CMS: Adding and Setting Up a Progress Bar

2 min read

Progress bars allow you to visually display the status of an ongoing process. Some common uses for progress bars are to display:
  • How much of a process a user 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 user 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.
Before you begin:

To add and set up a progress bar:

  1. Click Add on the left side of the Editor.
  2. Click Interactive.
  3. Click Progress Bar.
  4. Click and drag the progress bar of your choice on to your page. 
  5. Click the Connect to Data  icon.
  6. Click the Connect a dataset drop-down and choose a dataset from the drop-down list.
  7. Click the Progress value connects to drop-down and select the required field.
  8. Click the Target value connects to drop-down and select the required field.
Once your progress bar is connected to a dataset and linked to the required fields, the progress bar automatically reads the progress value from the dataset.
You can use Velo to update the progress bar's value without connecting to the CMS. To learn more, see Working with the Progress Bar Element.

Did this help?