美文网首页
进度条式的动态加载div加样式

进度条式的动态加载div加样式

作者: IT行者q | 来源:发表于2020-08-06 14:28 被阅读0次

div

<div class="mark" style="display: block;">
    <div class="status-info">
        <span class="title">- 审核中,请耐心等待 -</span>
        <div class="line">
            <span class="line-in"></span>
        </div>
    </div>
</div>

样式

.mark{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,.7);
    z-index: 100;
}
.status-info{
    padding-top: 12px;
    position: absolute;
    top: 50%;
    left: 10px;
    right: 10px;
    border-radius: 6px;
    background-color: #fff;
    transform: translateY(-50%);
}
.status-info .title{
    display: block;
    text-align: center;
    color: #009685;
    font-size: 12px;
}
.status-info .line{
    position: relative;
    margin: 12px;
    height: 8px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #EDEDED;
}
.status-info .line-in{
    position: absolute;
    left: 0;
    height: 8px;
    border-radius: 8px;
    background:#77EFE2;
    background-image:-webkit-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-image:-o-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-image:linear-gradient(to right, #77EFE2, #42D3C3, -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);
    -webkit-background-size:20px 20px;background-size:20px 20px;
    -webkit-animation:progress-bar-stripes 5s linear infinite;
    -o-animation:progress-bar-stripes 5s linear infinite;
    animation:progress-bar-stripes 5s linear infinite;
}
@-webkit-keyframes progress-bar-stripes{from{background-position:40px 0; right: 100%}to{background-position:0 0; right: 0%}}
@-o-keyframes progress-bar-stripes{from{background-position:40px 0; right: 100%}to{background-position:0 0; right: 0%}}
@keyframes progress-bar-stripes{from{background-position:40px 0; right: 100%}to{background-position:0 0; right: 0%}}

相关文章

网友评论

      本文标题:进度条式的动态加载div加样式

      本文链接:https://www.haomeiwen.com/subject/jqgsrktx.html