CMS: Adding and Setting Up a Progress Bar
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
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
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, select Add a 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.
Click the Target value connects to drop-down and select the field that you want to use to represent the target goal.
Click the Layout icon
to edit customize the layout of the bar:
Field title indent: Drag the slider to change the indentation of the field title, which is the Label you enter in the progress bar settings.
Space between bar and title: Drag the slider to adjust the distance between the field title and the bar.
Direction: Choose the text direction: Left to right or Right to left
Alignment: Choose the text alignment: Left, Center, or Right
Advanced: Click Advanced to edit the text direction for the label and the direction in which the bar progress moves.
Click the Design icon
and choose a preset design or customize the existing design further.
Static target value
Enter the Target value in the field.
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, select Add a 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.
Click the Layout icon
to edit customize the layout of the bar:
Field title indent: Drag the slider to change the indentation of the field title, which is the Label you enter in the progress bar settings.
Space between bar and title: Drag the slider to adjust the distance between the field title and the bar.
Direction: Choose the text direction: Left to right or Right to left
Alignment: Choose the text alignment: Left, Center, or Right
Advanced: Click Advanced to edit the text direction for the label and the direction in which the bar progress moves.
Click the Design icon
and choose a preset design or customize the existing design further.
Studio Editor
Click Add Elements
on the left side of the editor.
Click Input.
Click Progress Bar under Display.
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
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, select Add a 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.
Click the Target value connects to drop-down and select the field that you want to use to represent the target goal.
Click the Layout icon
to edit customize the layout of the bar:
Field title indent: Drag the slider to change the indentation of the field title, which is the Label you enter in the progress bar settings.
Space between bar and title: Drag the slider to adjust the distance between the field title and the bar.
Direction: Choose the text direction: Left to right or Right to left
Alignment: Choose the text alignment: Left, Center, or Right
Advanced: Click Advanced to edit the text direction for the label and the direction in which the bar progress moves.
Click the Design icon
in the Inspector panel to edit the design of the progress bar.
Static target value
Click Set Target Value on the progress bar element and enter the value in the Target value field.
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.
Click the Layout icon
to edit customize the layout of the bar:
Field title indent: Drag the slider to change the indentation of the field title, which is the Label you enter in the progress bar settings.
Space between bar and title: Drag the slider to adjust the distance between the field title and the bar.
Direction: Choose the text direction: Left to right or Right to left
Alignment: Choose the text alignment: Left, Center, or Right
Advanced: Click Advanced to edit the text direction for the label and the direction in which the bar progress moves.
Click the Design icon
in the Inspector panel to edit the design of the progress bar.
Need A Professional Website?
Contact Us Today!
I'm a paragraph. I'm connected
I'm a paragraph. I'm connected
I'm a paragraph. I'm connected
I'm a paragraph. I'm connected
I'm a paragraph. I'm connected
I'm a paragraph. I'm connected