(function($) { $(document).ready(function(){ var docHeight = $(document).height(); var winHeight = $(window).height(); var $scrollBar = $('#scrollBar'); var $progressLabel = $('.et-progress-label p span'); $scrollBar.css('width', 0); $progressLabel.html('0%'); $(window).scroll(function(){ var winScrollTop = $(window).scrollTop(); var scrollPercentage = Math.abs(winScrollTop / (docHeight - winHeight)*100); $scrollBar.css('width', (scrollPercentage + '%')); $progressLabel.html( Math.round(scrollPercentage) + '%'); }); }); })( jQuery );
Step 1
Step 2
Step 3
Step 4

Let’sstarted

Step One…

Sed aliquet risus a urna aliquet blandit. Maecenas a scelerisque lorem. Sed commodo lectus sit amet felis rutrum, blandit elementum dui tincidunt. Nunc in tortor sit amet leo pharetra lobortis sed a velit. Fusce eu ante lacinia, gravida nibh id, semper lectus. Quisque lacinia rhoncus consectetur.

Step Two…

Sed aliquet risus a urna aliquet blandit. Maecenas a scelerisque lorem. Sed commodo lectus sit amet felis rutrum, blandit elementum dui tincidunt. Nunc in tortor sit amet leo pharetra lobortis sed a velit. Fusce eu ante lacinia, gravida nibh id, semper lectus. Quisque lacinia rhoncus consectetur.

Step Three…

Sed aliquet risus a urna aliquet blandit. Maecenas a scelerisque lorem. Sed commodo lectus sit amet felis rutrum, blandit elementum dui tincidunt. Nunc in tortor sit amet leo pharetra lobortis sed a velit. Fusce eu ante lacinia, gravida nibh id, semper lectus. Quisque lacinia rhoncus consectetur.

Step Four…

Sed aliquet risus a urna aliquet blandit. Maecenas a scelerisque lorem. Sed commodo lectus sit amet felis rutrum, blandit elementum dui tincidunt. Nunc in tortor sit amet leo pharetra lobortis sed a velit. Fusce eu ante lacinia, gravida nibh id, semper lectus. Quisque lacinia rhoncus consectetur.