<h1>CSS Loading Animation</h1>
<div id="page-wrapper">
<div class="loading">oAc</div>
</div>
h1{
text-align:center;
font-family: 'Open Sans Light', 'Segoe UI', Helvetica, sans-serif;
font-weight: 300;
font-size:4em;
color:#333;
}
#page-wrapper{
padding:6em 5em;
}
.loading{
text-align:center;
color:#d44e4e;
}
.loading:before,
.loading:after{
content: "";
display: inline-block;
vertical-align: middle;
margin: 0 0.7em;
width: 10em;
border-bottom: 1px solid #d44e4e;
-moz-animation: loading 3s forwards linear;
-webkit-animation: loading 3s forwards linear;
animation: loading 3s forwards linear;
-moz-animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
animation-iteration-count:infinite;
}
/*Animation time*/
@-webkit-keyframes loading {
0% {width: 0em; opacity:0.1}
70% {width: 8em; opacity:1.0}
100% {width: 10em; opacity:0.0}
}
@-moz-keyframes loading {
0% {width: 0em; opacity:0.1}
70% {width: 8em; opacity:1.0}
100% {width: 10em; opacity:0.0}
}
@keyframes loading {
0% {width: 0em; opacity:0.1}
70% {width: 8em; opacity:1.0}
100% {width: 10em; opacity:0.0}
}
This Pen doesn't use any external CSS resources.