Customize Progress Bar to Change Colors Based on Percent Complete | XM Community
Skip to main content

Hi, I’ve found code to change the color of the progress bar, however I was wondering if someone could provide a code that would allow the progress bar to move from one color to another based on the percent complete. For example, red > yellow  > green, red for the first 1/3, then it goes into yellow for the second 1/3, and finally green.

 

Thanks!

We can use JS to determine the progress % and then using condition we can change progress bar background color as required.

Thank you @Shashi, I am new to coding, are you able to provide instructions or the code for JS and the conditions for me to enter? Where would I enter the JS for a progress bar? 

Hi, JS can be included in the survey’s Header so that it runs on every page of the survey. Over in the Look & Feel’s General section, click “edit” for the Header and then use the HTML/Source view “<>” to add the below:

<script>

Qualtrics.SurveyEngine.addOnReady(function()
{

var progressbar = document.getElementsByClassName("ProgressBarFill");
var progress = progressbar 0].style.width;
progress = progress.replace(/%/g, '');

if (progress >= 0 && progress < 33) {
  progressbar 0].style.backgroundColor = "#ff0000";
}

if (progress >= 33 && progress < 66) {
  progressbar 0].style.backgroundColor = "#ffff00";
}

if (progress >= 66 && progress < 99) {
  progressbar 0].style.backgroundColor = "#1fd655";
}

if (progress == 100) {
  progressbar 0].style.backgroundColor = "#008631";
}

});

</script>

 

Thanks @Tom_1842!
Hm, I placed that code but it appears to only flash the color for a second based on those percents, and then goes back to the default blue color. (I tried to screenshot it, but since the color flashes only for a second, I’m not able to.) Any ideas?

Disregard! I changed it to AddOnReady and it’s working as designed. Thanks a million!

Glad to hear! I updated my post to use OnReady instead.

Leave a Reply


Terms & Conditions