Loader as a negative delay example

index.html

<div class="loader">
  <div class="row1">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="row2">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="row3">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="row4">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</div>

loader-as-a-negative-delay-example.markdown

Loader as a negative delay example

I've seen a few pens that to have offset animations they use a positive value for the delay and that creates a pause - use a negative value to jump to a point in the animation.

A Pen by Atticus Koya on CodePen.

License.

script.js

pentitle="Negative Delay Loader";

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//dev.finnthewebdesigner.com/pentitle.js"></script>

style.css

/*Negative delay values skip rather than pause.*/
.row1 .left, .row1 .right {
  animation-delay:-0s; 
  /*Obviously not needed*/
}
.row2 .left, .row2 .right {
  animation-delay:-0.5s;
}
.row3 .left, .row3 .right {
  animation-delay:-1s;
}
.row4 .left, .row4 .right {
  animation-delay:-1.5s;
}
/**/

.loader {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:200px;
  height:84px;
}
.left, .right {
  height:6px;
  width:90px;
  background-color:#000;
  border-radius:10px;
  position:absolute;
}
.left {
  left:0px;
  animation:left 2s infinite;
}
.right {
  right:0px;
  animation:right 2s infinite;
}



.row1, .row2, .row3, .row4 {
  position: relative;
}
.row1 {
  top:0px;
}
.row2 {
  top:26px;
}
.row3 {
  top:52px;
}
.row4 {
  top:78px;
}

@keyframes left {
  0%, 50%, 100% {
    width: 90px;
  }
  25% {
    width: 170px;
  }
  75% {
    width:10px;
  }
}
@keyframes right {
  0%, 50%, 100% {
    width: 90px;
  }
  25% {
    width: 10px;
  }
  75% {
    width:170px;
  }
}