Reading Progress Bar to WordPress in 30 seconds! (EASY Method)

By Grant Ambrose

HTML element


<div id="reading-progress"><div id="reading-progress-fill"></div></div>
Code language: PHP (php)

JS and CSS

<?php
// taken from https://www.hashbangcode.com/article/creating-reading-progress-bar-javascript
add_action("wp_footer", "pirate_do_reading_prog_bar");
function pirate_do_reading_prog_bar()
{
    //$active_template_id = \Bricks\Database::$active_templates["content"];
    // Below code helps you trouble shoot the correct Bricks Template ID
    //echo '<script>console.log("Template ID:'.$active_template_id.'")</script>';
    
    // if ( $active_template_id == 62331 ) {
    if ( is_singular(array('post', 'wp_review')) || is_page('28732')) { ?>
    
    
        <script>
            const readingProgress = document.querySelector('#reading-progress-fill');
            const footerHeight = 660;
            document.addEventListener('scroll', function(e) {
                let w = (document.body.scrollTop || document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight - footerHeight) * 100;
                    readingProgress.style.setProperty('width', w + '%');
            });
        </script>
        <style>
            /* Layout */
            #reading-progress {
                position: fixed;
                width: 100%;
                height: 15px;
                z-index: 9999;
                top: 0;
                left: 0;
            }
            
            #reading-progress-fill {
                height: 15px;
                width: 0;
            }
            
            /* Theme */
            #reading-progress-fill {
                -webkit-transition: width 100ms ease;
                -o-transition: width 100ms ease;
                transition: width 100ms ease;
                background-color: var(--bricks-color-rwiath);
            }
        </style>
    <?php }
}
Code language: PHP (php)

Leave the first comment

Not sure where to start?

Get my FREE 30-day Course:

QUICK-WINS for Solopreneurs using WordPress to grow their Online Business

The aim of this course is to help Solopreneurs like YOU overcome some of the most common problems you will face when trying to create, manage and update your Business’ WordPress website.

A QUICK-WIN is something you can go and implement into your website TODAY and see improvements instantly.

Each lesson is aimed at helping you overcome 1 headache associated with managing your WordPress website.

The perfect course for Solopreneurs building an Online Business with WordPress

Get Access Now
Some of my best tips and tricks!