Topbar CSS loader with CSS3 animation

by Faisal Khan Janjua

HTML

<div class="loadWrapper">
  <div class="load-bar">
    <div class="bar"></div>
    <div class="bar"></div>
  </div>
</div>

CSS

.loadWrapper {
  top:0;
  left:0;
  right:0;
  bottom:0;
  display:inline;
  position: fixed;
  z-index: 99999999;
  background: #F8F8F8
}
.load-bar {
  width: 100%;
  height: 6px;
  position: absolute;
  background-color: #FDAB0A;
}
.bar {
  content: "";
  display: inline;
  position: absolute;
  width: 0;
  height: 100%;
  left: 0;
  right:0;
  margin:auto;
  text-align: center;
}
.bar:nth-child(1) {
  background-color: #B90011;
  animation: loading1 1.5s linear infinite;
}
.bar:nth-child(2) {
  background-color: #FDAB0A;
  animation: loading2 1.5s linear 0.75s infinite;
}

@keyframes loading1 {
    from {left: 0; width: 0;z-index:1;}
    to {left: 0; width: 200%;}
}
@keyframes loading2 {
    from {left: 0; width: 0;z-index:1;}
    to {left: 0; width: 200%;}
}