Home Blog Show A Page Scroll Progress Bar In WordPress

Show A Page Scroll Progress Bar In WordPress


There’s valid psychology that validates the notion that if we provide an individual of progress required to complete a task, they’re far more likely to complete it. This principle is the motivation for progress bars on forms to indicate what effort is required for completion… and they work.

WordPress themes now come with shortcode that’ll render circular (or other) progress bars on your website for no good reasons other than fancy-pants exhibitionism and it annoys us to no end – don’t use them unless they serve a purpose.

One style of progress bar that we believe is truly beneficial is a page scroll progress bar to indicate a page reading position with relation to the end of a document. The indicator creates a ‘temporal expectancy’ and give us motivation to scroll through to completion (for a little dopamine rush, apparently).

In this article we’ll show you how to create the most basic of scroll-bars fixed to the footer of your WordPress website. To see the effect, scroll down on this page. We’re building our own full-featured solution for our client area and this was the first example we played with (this code isn’t overly efficient). However, the code works well and navigates the complexities often associated with incorporating this feature.

The vanilla JavaScript is prone to various errors that will be overcome with our next article that provides a jQuery solution that abstracts the complexities associated with various browsers and scrolling conditions. Our newer function (which uses the progress tag simply because it’s semantically accurate) will make its way into a client function shortly.

The height, color, and background color of the progress bar may all be altered to your liking.

The Code

Copy and paste the WordPress function into your theme's functions.php file or, if you sensibly have one installed, your custom functions plugin.


  • We use inline styling for the progress bar. You’ll likely want to alter the height of the scrollbar, background (resting color), and scoll background color (inner div).
  • Set the scrollbar to the top of your page by changing bottom: 0; to top: 0;.;
  • See also: “Add a Fixed (Floating) Footer or Header Bar in WordPress in One Line of Code“.
  • If you have a long footer height, consider factoring this into your window height calculation to have it excluded.


Title: Show A Page Scroll Progress Bar In WordPress
Description: Show A Page Scroll Progress Bar In WordPress. Customise the size and color of the progress indicator.
Download: Shortcode (V0.1) | | Plugin Page

Shortt URL for this post: http://shor.tt/Jhg


Please enter your comment!
Please enter your name here