Homepage / Doc / Progress Section

Progress Section

The progress bar of a survey is, most of the time, located at the top of the survey. Although the progress bar itself is quite simple it does support some fairly complex customization via javascript. For instance, here is the progress bar HTML generated on the first page of a survey.

<span id="_responseView__pageView_Layout___progressZoneTop"><div id="_responseView__pageView_Layout___progressZoneTop__progressPanel" class="progressWrapper">
	
    <div id="_responseView__pageView_Layout___progressZoneTop__progressBar" class="ProgressBar">
		<div class="ProgressBarInner" style="width:0%;">

		</div>
	</div>

</div></span>

The “progress” of the bar is set in the div with the ProgressBarInner class. This means that by accessing that class via a selector and updating the width you can dynamically alter the progress displayed in the bar.

$(".ProgressBarInner").width('5%');

You can find a more complex example would be converting our existing progress bar into something completely different here :

jQuery UI Progress bar

November 17, 2016