css3 實現無限循環漸變進度條

以下以小程序標籤爲例，可以直接改view => div 適用於傳統網頁

wxml文件

<view class="bg-default"></view>

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的定位在動畫週期內勻速改變，就會有滾動條加載的效果了