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