CSS3彩色进度条加载动画 带进度百分比

2020-04-23101次阅读css3

CSS3彩色进度条加载动画 带进度百分比,演示网址在这里

<p className="progressWrap"><i style="width:50%"></i></p>
.progressWrap{
    margin:40px auto 30px;
    width:480px;
    $height:16px;
    height:$height;
    border-radius:$height;
    overflow:hidden;
    background-color: #eee;
    i{
        display:block;
        height:inherit;
        background-color: #ffa800;
        background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
        background-size: 20px 20px;
        animation: reverse progress-bar-stripes 0.40s linear infinite, animate-positive 2s;
    }
}

@keyframes animate-positive{
    0% { width: 0; }
}

@keyframes progress-bar-stripes {
    from {
        background-position: 40px 0
    }

    to {
        background-position: 0 0
    }
}

 

上一篇: React开发onChange事件提示 use event.persist()错误  下一篇: input File文件上传accept过滤zip、rar等  

CSS3彩色进度条加载动画 带进度百分比相关文章