美文网首页
进度条式的动态加载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