Animated Gradient Background
Animated Gradient Background
July 30, 2024
Author Bio Box CSS in WordPress
Author Bio Box CSS in WordPress
July 30, 2024

July 30, 2024

Reading Progress Bar

A reading progress bar that fills as you scroll makes the experience better by giving you a visual indicator of where you are on the page, makes navigation more intuitive and fun.

CSS

/* ---------------------------------------------------------- */
/*                Snippflow Reading Progress Bar              */
/* ---------------------------------------------------------- */
#sf-reading-progress-bar { 
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index: 9999; 
	width: 0%; 
	height: 5px; 
	background-color: #46A787; 
	margin: 0; 
}

/* WP Admin Bar fix */
.admin-bar #sf-reading-progress-bar { 
	top: 32px; 
} 
@media screen and (max-width: 782px) {
	.admin-bar #sf-reading-progress-bar { 
		top: 46px; 
	}
}
@media screen and (max-width: 600px) {
	.admin-bar #sf-reading-progress-bar { 
		top: 0;
	}
}

jQuery for Reading Progress Bar

$(document).ready(function() {

if ($('body').hasClass('single')) {

    var totalHeight = $('main').outerHeight(true);
    var footerHeight = $('footer').outerHeight(true);
    var windowHeight = $(window).height();

    console.log(totalHeight);
    console.log(footerHeight);

    if (totalHeight > 0) {
        $('header').after('<div id="sf-reading-progress-bar"></div>');

        $(window).scroll(function() {
            var scrollPosition = $(window).scrollTop();
            var scrollableHeight = totalHeight + footerHeight - windowHeight;
            var progress = (scrollPosition / scrollableHeight) * 100;
            progress = Math.min(progress, 100);
            $('#sf-reading-progress-bar').css('width', progress + '%');
        });
    }
}

});

Leave a Reply

Your email address will not be published. Required fields are marked *

Level Up Your Coding Skills

Get the best CSS, HTML, and JS snippets delivered to your inbox monthly. 🚀
No spam—just coding gold! 💻✨"

We don’t spam! Read our privacy policy for more info.

cookie
This website uses cookies to improve your experience. By using this website you agree to our Data Protection Policy.
Read more