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

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)