Simple, Animated CSS Loading Bar

simplecssloadingbar.css

#outer-barG{
height:37px;
width:299px;
border:2px solid steelblue;
overflow:hidden;
background-color:khaki;
margin 0 auto 0 auto;
}

.bar-lineG{
background-color:coral;
float:left;
width:18px;
height:120px;
margin-right:17px;
margin-top:-28px;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}

.bar-animationG{
margin-left:168px;
width:168px;
-moz-animation-name:bar-animationG;
-moz-animation-duration:4.8s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-webkit-animation-name:bar-animationG;
-webkit-animation-duration:4.8s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-ms-animation-name:bar-animationG;
-ms-animation-duration:4.8s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-o-animation-name:bar-animationG;
-o-animation-duration:4.8s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
animation-name:bar-animationG;
animation-duration:4.8s;
animation-iteration-count:infinite;
animation-direction:linear;
}

#front-barG{
}

@-moz-keyframes bar-animationG{
0%{
margin-left:-128px;
margin-top:-18px}

100%{
margin-left:340px;
margin-top:-18px}

}

@-webkit-keyframes bar-animationG{
0%{
margin-left:-128px;
margin-top:-18px}

100%{
margin-left:340px;
margin-top:-18px}

}

@-ms-keyframes bar-animationG{
0%{
margin-left:-128px;
margin-top:-18px}

100%{
margin-left:340px;
margin-top:-18px}

}

@-o-keyframes bar-animationG{
0%{
margin-left:-128px;
margin-top:-18px}

100%{
margin-left:340px;
margin-top:-18px}

}

@keyframes bar-animationG{
0%{
margin-left:-128px;
margin-top:-18px}

100%{
margin-left:340px;
margin-top:-18px}

}

.wrap {
  width:  300px;
  height: 800px;
  margin: 0 auto;
  text-align: center;
}

.spacer {
  height: 30%;
}
h2 {
  text-align: center;
  font-family: 'Alegreya Sans SC', sans-serif;
  font-weight: 300;
  font-size: 26px;
}

simpllecssloadingbar.html

<!-- font optional, of course -->
<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans+SC:300,400,500,700' rel='stylesheet' type='text/css'>

<div class="wrap">
  <div class="spacer"></div>
  <div id="outer-barG">
    <div id="front-barG" class="bar-animationG">
      <div id="barG_1" class="bar-lineG"></div>
      <div id="barG_2" class="bar-lineG"></div>
      <div id="barG_3" class="bar-lineG"></div>
    </div>
  </div>
  <h2>Please wait while we<br/>load something awesome...</h2>
</div>