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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js