css进度条

效果如图：

html代码

<div class="cell">
  <div class="prop"></div>
</div>

css代码

.cell{
    width: 300px;
    height: 5px;
    background: #ddd;
    position: relative;
}
.prop{
    width: 300px;
    height: 5px;
    position: absolute;
    top:0;
    left: 0;
    background: linear-gradient(to right, rgba(239,141,142,1),rgba(98,152,248,1));
    transform-origin: left center;
    transform: scaleX(0);  
    z-index: 9;
    animation: 2s ease-in 1s slidein infinite;
}

@keyframes slidein{
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}

transform-origin: left center; 伸展方向
transform: scaleX(0); 横向缩放