Change value of the progress bar | XM Community
Skip to main content
Is it possible to change the value of the built in progress bar with a simple javascript code?

The current %-values of my survey give a wrong impression about the length, so I'd like to assign my own values.
Yes, if assignedProgress is a number representing the current progress:

```

jQuery("div.ProgressBarFill").css("width", assignedProgress+"%");

```
Thanks a lot. Works perfectly.
So this would provide a value to the progress? Like 65%? And where would I enter this javascript to make this happen? Thanks!
> @djunius said:

> So this would provide a value to the progress? Like 65%? And where would I enter this javascript to make this happen? Thanks!



It would set the progress bar fill amount. You would add the JS to the addOnReady function in any question on the page or to a script in the header or footer.

Change value of the progress barWorked great.. Thanks..

So, for some reason I had a problem with that code and couldn't get it work. This one worked right away for me:
jQuery("div.ProgressBarFill").css("width", "80%");

Hi, I want to change the number on the progress bar of some pages manually. The code on the comment above works perfectly on moving the bar to represent, for example 80% progress, but I would like the number to update too. I have the following code on the look and feel header, that shows the number on the progress bar e.g. 80% progress.
Qualtrics.SurveyEngine.addOnReady(function() { 

jQuery("table.ProgressBarContainer tbody tr td:eq(0) label").text(jQuery("#ProgressBarFillContainer span").text()); });


Does anyone know how to adjust the code below so that the number would update too?
jQuery("div.ProgressBarFill").css("width", "80%");
Thank you!

https://community.qualtrics.com/XMcommunity/discussion/comment/15489#Comment_15489where I input this code?

Is there a way for the progress bar to update as questions are completed I.E - I have 53 questions, when someone has completed 10, how do I get the progress bar to show 10/53 aka 19% complete?

https://community.qualtrics.com/XMcommunity/discussion/comment/45533#Comment_45533You would need to keep the question count in an embedded variable and update it on each page. 'assignedProcess' would be your embedded variable divided by 53.

TomG done thru adding code? any additional advice would be greatly appreciated!

Yes, if assignedProgress is a number representing the current progress:
```
jQuery("div.ProgressBarFill").css("width", assignedProgress+"%");
```

Does anyone know how to get this code to work under Simple Layout? Try adding a script to call the JS library in the survey header, but that still hasn’t worked.

Leave a Reply


Terms & Conditions