css 实现进度条条形码和滚动

进度条实现隔色条形用到  background-imag

.progress-blue2{
    background-image: -webkit-linear-gradient(45deg,#195bb1 25%,rgba(27,95,179,1) 25%,rgba(27,95,179,1) 50%,#195bb1 50%,#195bb1 75%,rgba(27,95,179,1) 75%,rgba(27,95,179,1));
    background-image: -webkit-gradient(45deg,#195bb1 25%,rgba(27,95,179,1) 25%,rgba(27,95,179,1) 50%,#195bb1 50%,#195bb1 75%,rgba(27,95,179,1) 75%,rgba(27,95,179,1));
    background-image: -moz-linear-gradient(45deg,#195bb1 25%,rgba(27,95,179,1) 25%,rgba(27,95,179,1) 50%,#195bb1 50%,#195bb1 75%,rgba(27,95,179,1) 75%,rgba(27,95,179,1));
    background-image: -o-linear-gradient(45deg,#195bb1 25%,rgba(27,95,179,1) 25%,rgba(27,95,179,1) 50%,#195bb1 50%,#195bb1 75%,rgba(27,95,179,1) 75%,rgba(27,95,179,1));
    background-image: -ms-linear-gradient(45deg,#195bb1 25%,rgba(27,95,179,1) 25%,rgba(27,95,179,1) 50%,#195bb1 50%,#195bb1 75%,rgba(27,95,179,1) 75%,rgba(27,95,179,1));
    
    background: linear-gradient(45deg,#195bb1 25%,rgba(27,95,179,1) 25%,rgba(27,95,179,1) 50%,#195bb1 50%,#195bb1 75%,rgba(27,95,179,1) 75%,rgba(27,95,179,1));
    width: 0%;
    height: 17px;
    border-radius: 20px;
    -webkit-transition:all 1s;
    -moz-transition:all 1s;
    -ms-transition:all 1s;
    -o-transition:all 1s;
    transition:all 1s;
}

滚动代码

.bg-animation{
    -webkit-animation: progress-bar-stripes 2s linear infinite; 
    -moz-animation: progress-bar-stripes 2s linear infinite; 
    -ms-animation: progress-bar-stripes 2s linear infinite; 
    -o-animation: progress-bar-stripes 2s linear infinite; 
    animation: progress-bar-stripes 2s linear infinite; 
}
@-webkit-keyframes progress-bar-stripes{from{background-position:0px 0}to{background-position:40px 0}}
@-moz-keyframes progress-bar-stripes{from{background-position:0px 0}to{background-position:40px 0}}
@-o-keyframes progress-bar-stripes{from{background-position:0px 0}to{background-position:40px 0}}
@keyframes progress-bar-stripes{from{background-position:0px 0}to{background-position:40px 0}}

走