Logo

dev-resources.site

for different kinds of informations.

Reading Progress Bar

Published at
1/10/2025
Categories
css
html
jquery
wordpress
Author
snippflow
Categories
4 categories in total
css
open
html
open
jquery
open
wordpress
open
Author
9 person written this
snippflow
open
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.

$(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 + '%');
        });
    }
}

});
Enter fullscreen mode Exit fullscreen mode

Full article: Reading Progress Bar
CSS Snippets

jquery Article's
30 articles in total
Favicon
Reading Progress Bar
Favicon
Add Row (Clone)
Favicon
Make PDF to Images converter in html, css, and, java, bootstrap and jquery
Favicon
$( "#x" ).prop( "checked", false ) is not working
Favicon
5 Top Libraries Each Frontend Developer Must Know
Favicon
Ditch the jQuery Crutch and Embrace Vanilla JS 👨🏽‍💻
Favicon
Level Up Your Web Development: Why You Should Ditch jQuery for Vanilla JavaScript
Favicon
Why Does jQuery or a DOM Method Like `getElementById` Fail to Find an Element?
Favicon
SimpleTimepickerRB: A Lightweight and Customizable Timepicker Plugin for jQuery
Favicon
A Comprehensive Guide with XHR, Fetch API, Axios and jQuery AJAX
Favicon
Unleash Your Web Development Skills with the 'Quick Start with jQuery' Course
Favicon
Building a One-Page CRUD Application with Laravel and jQuery
Favicon
Here's How I implement cursor-based pagination in jQuery Datatable.
Favicon
Using jQuery
Favicon
HeatColor UDF (based on jQuery library)
Favicon
Jquery select2 css height problem fixed
Favicon
Why jQuery Exists
Favicon
Scientific problems are not real problems for programmers
Favicon
Master jQuery.each() with These 5 Essential Examples
Favicon
Master jQuery.each() with These 5 Essential Examples
Favicon
Total.js UI :Two Beginner Projects to understand Paths and Data Binding
Favicon
Implementing Infinite Scroll with Laravel and jQuery
Favicon
jQuery vs React – Which One Is Better For Your Project?
Favicon
Tutorial Menggunakan jQuery pada WordPress dengan benar
Favicon
Uncovering the Magic: 10 Fascinating Facts About jQuery
Favicon
Asynchronous Requests in JavaScript: AJAX, JQUERY, FETCH and AXIOS.
Favicon
jQuery's Role in Modern Web Development: Beginnings, 2024, and Beyond
Favicon
Vanilla JS Effect Methods
Favicon
Common JavaScript "event Handler" Mistake
Favicon
Recommended Project: Implement User Login Function

Featured ones: