A Pen by Mike Kohn.

index.html

<div class="loader">
  <div></div>
  <div></div>
  <div></div>
</div>

Slidey-Loader.markdown

Slidey Loader

CSS loader animation.

Is there a way to condense the HTML/CSS so it works with an arbitrary number of loading bars?

A Pen by Mike Kohn on CodePen.

License.

style.css

body {
  background: #000;
}

.loader {
  width: 70%;
  margin: 20px auto;
  overflow: hidden;
}

.loader div {
  width: 0;
  height: 3px;
  border-top: 1px solid #FFF;
}

.loader div {
  -moz-animation-duration: 1500ms;
  -webkit-animation-duration: 1500ms;
  -ms-animation-duration: 1500ms;
  -o-animation-duration: 1500ms;
  animation-duration: 1500ms;

  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;

  -moz-animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  -ms-animation-timing-function: ease-in-out;
  -o-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

.loader div:first-child {
  -moz-animation-name: load;
  -webkit-animation-name: load;
  -ms-animation-name: load;
  -o-animation-name:  load;
  animation-name: load;
}

@-moz-keyframes load {
  0% {width: 0%;}
  50% {width: 0%;}
  100% {width: 100%;}
}
@-webkit-keyframes load {
  0% {width: 0%;}
  50% {width: 0%;}
  100% {width: 100%;}
}
@-ms-keyframes load {
  0% {width: 0%;}
  50% {width: 0%;}
  100% {width: 100%;}
}
@-o-keyframes load {
  0% {width: 0%;}
  50% {width: 0%;}
  100% {width: 100%;}
}
@keyframes load {
  0% {width: 0%;}
  50% {width: 0%;}
  100% {width: 100%;}
}

.loader div:nth-child(2) {
  -moz-animation-name: load2;
  -webkit-animation-name: load2;
  -ms-animation-name: load2;
  -o-animation-name:  load2;
  animation-name: load2;
}

@-moz-keyframes load2 {
  0% {width: 0%;}
  30% {width: 0%;}
  80% {width: 100%;}
  100% {width: 100%;}
}
@-webkit-keyframes load2 {
  0% {width: 0%;}
  30% {width: 0%;}
  80% {width: 100%;}
  100% {width: 100%;}
}
@-ms-keyframes load2 {
  0% {width: 0%;}
  30% {width: 0%;}
  80% {width: 100%;}
  100% {width: 100%;}
}
@-o-keyframes load2 {
  0% {width: 0%;}
  30% {width: 0%;}
  80% {width: 100%;}
  100% {width: 100%;}
}
@keyframes load2 {
  0% {width: 0%;}
  30% {width: 0%;}
  80% {width: 100%;}
  100% {width: 100%;}
}

.loader div:last-child {
  -moz-animation-name: load3;
  -webkit-animation-name: load3;
  -ms-animation-name: load3;
  -o-animation-name:  load3;
  animation-name: load3;
}

@-moz-keyframes load3 {
  0% {width: 0%;}
  10% {width: 0%;}
  60% {width: 100%;}
  100% {width: 100%;}
}
@-webkit-keyframes load3 {
  0% {width: 0%;}
  10% {width: 0%;}
  60% {width: 100%;}
  100% {width: 100%;}
}
@-ms-keyframes load3 {
  0% {width: 0%;}
  10% {width: 0%;}
  60% {width: 100%;}
  100% {width: 100%;}
}
@-o-keyframes load3 {
  0% {width: 0%;}
  10% {width: 0%;}
  60% {width: 100%;}
  100% {width: 100%;}
}
@keyframes load3 {
  0% {width: 0%;}
  10% {width: 0%;}
  60% {width: 100%;}
  100% {width: 100%;}
}