进度条式的动态加载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%}}