css3 实现无限循环渐变进度条

以下以小程序标签为例，可以直接改view => div 适用于传统网页

wxml文件

wxss文件

.bg-default {
    animation-duration: 1s;
    /* 动画时长1s */
    animation-fill-mode: forwards; 
    /*当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）*/
    animation-iteration-count: infinite;
    /* 动画次数 无限次 */
    animation-name: animationa;
    /* 执行动画名称 */
    animation-timing-function: linear;
    /* 动画速度，线性匀速 */
    /* background: #f6f7f8; */
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    /* 背景颜色 */
    background-size: 750px auto;
    /* 背景大小 */
    height: 100%;
    min-height: 1em;
    position: relative;
}

@keyframes animationa {
    /* 修改背景定位 */
    0% {
        background-position: -750rpx 0;
    }
    100% {
        background-position: 750rpx 0
    }
}

总的原理就是：

background-size 则定义背景大小，background-position则会根据background-size的值去定位，否则默认view的宽带为750rpx；
让background的定位在动画周期内匀速改变，就会有滚动条加载的效果了