Init HTML

HTML

Các bạn thêm một thẻ để làm thanh tiến trình.

<div class="reading-bar"></div>

CSS

CSS đơn giản như sau.

.reading-bar {
     height: 5px;
     background-color: #1463f3;
     width: 0;
     z-index: 1000;
     position: fixed;
     top: 0;
     left: 0;
 }

jQuery

Phần xử lí cũng khá đơn giản.

jQuery(document).ready(function($) {
    $(window).on('scroll', function() {
        var scrollWin = $(window).scrollTop();
        var articleHeight = $('.single-content').outerHeight(true);
        var windowHeight = $(window).height();
        if (scrollWin >= ($('.single-content').offset().top - windowHeight)) {
            if (scrollWin <= ($('.single-content').offset().top + articleHeight)) {
                $('.reading-bar').css('width', ((scrollWin - $('.single-content').offset().top) / articleHeight) * 100 + '%');
            } else {
                $('.reading-bar').css('width', '0');
            }
        } else {
            $('.reading-bar').css('width', '0');
        }
    });
});

Với .single-content là class của thẻ mục bài viết của bạn.

Chúc các bạn thành công!