dev-resources.site
for different kinds of informations.
Reading Progress Bar
Published at
1/10/2025
Categories
css
html
jquery
wordpress
Author
SnippFlow
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.
$(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 + '%');
});
}
}
});
Full article: Reading Progress Bar
CSS Snippets
Articles
12 articles in total
Truncating Text with Text-Overflow
read article
Using the currentColor property to change SVG color
read article
Author Bio Box CSS in WordPress
read article
Reading Progress Bar
currently reading
Animated Gradient Background
read article
Gallery with varied image sizes using aspect-ratio and object-fit
read article
Back to Top button with smooth scroll
read article
Tooltips with Positioning (Top, Bottom, Left, Right)
read article
Center elements with flexbox
read article
Unordered and Ordered Lists with Auto-Increment Using Pseudoclasses
read article
Custom Mouse Cursor Using External Image
read article
WooCommerce Info Boxes under Add to Cart
read article
Featured ones: