Add a reading progress bar to single posts

This snippet add a reading progress bar across the top of the screen on single posts to indicate how much of the post has been read/is still to read.

Requires Kadence Pro (Elements).

1. In a fixed Kadence element, add a section within a section.
2. Style the parent section with a background colour and 5px height. Give an ID of bb-reading-container
3. Style the child section with a different background colour and 5px height. Give and ID of bb-reading-progress
4. Assign the element to ‘Fixed top after scroll’ and the show on single posts.
5. Set ‘Scroll down distance until appears’ to around 100px (depending on header height).

function bb_reading_progress_bar() {
    if (is_single()) {
        ?>
        <script>
document.addEventListener('DOMContentLoaded', function() {
    var progressBar = document.getElementById('bb-reading-progress');

    window.addEventListener('scroll', function() {
        var contentWrap = document.querySelector('.content-wrap .entry-content');
        if (!contentWrap) {
            return;
        }

        var contentHeight = contentWrap.offsetHeight;
        var contentTop = contentWrap.getBoundingClientRect().top + window.scrollY;
        var viewportHeight = window.innerHeight;
        var scrollY = window.scrollY;

        var progress = 0;

        if (scrollY >= contentTop) {
            var scrollEnd = contentTop + contentHeight - viewportHeight;
            progress = (scrollY - contentTop) / (scrollEnd - contentTop) * 100;
            progress = Math.min(progress, 100);
        }

        progressBar.style.width = progress + '%';
    });
});
 </script>
        <?php
    }
}
add_action('wp_footer', 'bb_reading_progress_bar');