Check out this Amazing Scan Text Loading Label using css. Designed by Eric Huguenin.
Scan Text Loading
HTML
[code language=”html”]
<div class="loading">
<span>Loading</span>
</div>
[/code]
CSS
[code language=”css”]
body {background:#f3efe8;}
.loading {
font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
text-transform:uppercase;
width:150px;
text-align:center;
line-height:50px;
position:absolute;
left:0;right:0;top:50%;
margin:auto;
transform:translateY(-50%);
}
.loading span {
position:relative;
z-index:999;
color:#fff;
}
.loading:before {
content:”;
background:#61bdb6;
width:128px;
height:36px;
display:block;
position:absolute;
top:0;left:0;right:0;bottom:0;
margin:auto;
animation:2s loadingBefore infinite ease-in-out;
}
@keyframes loadingBefore {
0% {transform:translateX(-14px);}
50% {transform:translateX(14px);}
100% {transform:translateX(-14px);}
}
.loading:after {
content:”;
background:#ff3600;
width:14px;
height:60px;
display:block;
position:absolute;
top:0;left:0;right:0;bottom:0;
margin:auto;
opacity:.5;
animation:2s loadingAfter infinite ease-in-out;
}
@keyframes loadingAfter {
0% {transform:translateX(-50px);}
50% {transform:translateX(50px);}
100% {transform:translateX(-50px);}
}
[/code]
