css内容进度条

最终效果  进度条高度可以调整

主要是用根基css的渐变完成的

第一步,给body添加渐变色 (从左上角一直拉到右下角)

效果如下

第二步,给body添加后面添加空元素,使他固定定位,并且设置他的背景颜色,并且使z-index=-1不然内容会被遮住

效果如下

第三步， 你会发现滚读条到底了进度条还没有走完所以需要给body使用 calc()函数进行计算

效果如下 完成

可复制代码

body {

        background-image: linear-gradient(to right top,red 50%, #eee 50%);

        background-size: 100% calc(100% - 100vh + 5px);

        background-repeat: no-repeat;

    }

    body::after{

    content:'';

    position: fixed;

    top: 10px;

    left: 0;

    bottom: 0;

    right: 0;

    background-color: #fff;

    z-index: -1;

    }