使用线性渐变实现滚动进度条

代码：

body{
    //(第一步)添加这样一个从左下到到右上角的线性渐变
    background-image:linear-gradient(to right top,#ffcc00 50%, #eee 50%);
    background-repeat:no-repeat;
    //(第三步)使用 calc 进行了运算，减去了 100vh，也就是减去一个屏幕的高度，这样渐变刚好在滑动到底部的时候与右上角贴合；
    //+5px 则是滚动进度条的高度，预留出 3px 的高度。
    background-size: 100% calc(100% - 100vh + 3px);
}

//(第二步)运用一个伪元素，把多出来的部分遮住
body::after{
    content:"";
    position: fixed;
    top: 3px;
    left: 0;
    bottom: 0;
    right: 0;
    background: #fff;
    z-index: -1;
}

来源：https://www.cnblogs.com/Salicejy/p/12033553.html