文章不错

前端定时轮询进度，并更新 DOM。后端通过任务 id 找到当前的进度，返回给前端。

你说的是顶部那个阅读进度条吗，红色的那条

对啊

我觉得应该是用 js 实现的，监听滚动条滚动事件，获取滚动条的位置，计算出当前位置占页面总高度的百分比。那个进度条就是一个 div，背景是白色的。红色的进度是进度条 div 里嵌套的一个 div，背景是红色的。根据前面计算出来的百分比动态改变红色进度条的 width 属性就行了。

刚刚找到一篇文章讲这个的https://www.w3cplus.com/css/pure-css-create-scroll-indicator.html

这是看了里边 js，实现如下：

function() {
    "use strict";
    function t() {
        var t = $(".blog-content");
        $(".scroll-indicator-container").remove();
        var n = function() {
            var n = e.scrollTop() - t.offset().top
              , i = n / (t.height() - e.height()) * 100;
            $(".scroll-indicator-container .__bar").css({
                width: i + "%"
            })
        };
        if ($(".blog-show").length && $(".post--full").length) {
            var i = $("header nav")
              , r = $('<div class="scroll-indicator-container"><div class="__bar"></div></div>');
            i.append(r),
            n(),
            e.on("scroll", n)
        } else
            e.off("scroll", n)
    }
    {
        var e = $(window);
        $(document)
    }
    $(t)
}();

这个纯 JS 实现的吧，感觉不需要后端...