条纹进度条循环滚动

<style>
.line {
            width:9.146667rem;
            height:.16rem;
            background:rgba(244,244,244,1);
            border-radius:.08rem;
            position: relative;
        }
.line span {
            background: #F0CA69;
            display: inline-block;
            height:.16rem;
            border-radius:.08rem;
            position: absolute;
            /* background: linear-gradient(
                135deg, 
                rgba(0, 153, 68, .5) 0, rgba(0, 153, 68, .5) 45%, transparent 25%, transparent 50%, 
                rgba(0, 153, 68, .5) 50%, rgba(0, 153, 68, .5) 75%, transparent 75%, transparent
            );
            background-size: 50px 50px; */
            background-size: 10px 10px;
            background-image: linear-gradient(135deg, #fff 15%, transparent 15%,
                    transparent 50%, #fff 50%, #fff 45%,
                    transparent 70%, transparent);
            -webkit-animation: animate-stripes 3s linear infinite;
            -moz-animation: animate-stripes 3s linear infinite;
        }
        @-webkit-keyframes animate-stripes {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: 60px 0;
            }
        }

        @-moz-keyframes animate-stripes {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: 60px 0;
            }
        }
</style>
<div class="line">
                        <span style="width:50%;"></span>
                    </div>