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%}}