Progress Bar

/**
 * Progress Bar
 * @link https://www.billerickson.net/code/progress-bar/
 */
function ea_header_progress_bar() {
	echo '<div class="progress"></div>';
}
add_action( 'tha_header_bottom', 'ea_header_progress_bar' );
	// Progress Bar
	$(document).on('ready', function() {
	  var winHeight = $(window).height(),
	      docHeight = $(document).height(),
	      progressBar = $('.site-header .progress'),
	      max, value;

	  /* Set the max scrollable area */
	  max = docHeight - winHeight;

	  $(document).on('scroll', function(){
	     value = $(window).scrollTop();
		 progressBar.css('width', value / max * 100 + '%' );
	     //progressBar.attr('value', value);
	  });

		$(window).on('resize', function() {
		  winHeight = $(window).height(),
		  docHeight = $(document).height();

		  max = docHeight - winHeight;
		  progressBar.css('width', value / max * 100 + '%');
		});

	});

Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk