Homepage / Doc / Progress Bar With jQuery UI

Progress Bar With jQuery UI

Leveraging the survey-wide javascript and CSS features you can customize the progress bar in various different ways. Here is an example on how to convert our standard progress bar to leverage the jQuery UI progress bar as documented here : https://jqueryui.com/progressbar/#label

*As of 2017 Q4 this javascript must be placed in a javascript item on each page in the survey.

$(document).ready(function() {
    var currentProgress = parseInt($('.ProgressBarInner')[0].style.width);
    $("#_responseView__pageView_Layout___progressZoneTop__progressBar").removeClass("ProgressBar");
    $("#_responseView__pageView_Layout___progressZoneTop__progressBar").append("<div class='ProgressBarLabel'>Loading...</div>");
    $("#_responseView__pageView_Layout___progressZoneTop__progressBar").progressbar({
        value: currentProgress,
    });
    $(".ProgressBarLabel").text(currentProgress + "%");
    $(".ProgressBarInner").detach();
});

Then by adding the following styles to the survey-wide style editor :

  .ui-progressbar {
    position: relative;
  }
  .ProgressBarLabel {
    position: absolute;
    left: 50%;
    top: 4px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
  }

You can achieve this :

Progress bar customization

To reduce the width of the progress bar you can alter the .ui-progressbar class and add some width to it.

  .ui-progressbar {
    position: relative;
    width: 50%;
  }
January 30, 2018