Loading pattern bars

by Spencer Smith

HTML

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

CSS

.load{
  height: 40px;
  width: 10px;
  //background-color: white;
  display: inline-block;
  margin: 0;
  box-sizing: border-box;
  //border-bottom: 60px solid;
  animation: loop 1.75s infinite;
}

@keyframes loop{
  0%{
    border-bottom: 6px solid mediumseagreen;
  }
  50%{
    border-bottom: 40px solid lightgreen;
  }
  100%{
    border-bottom: 6px solid mediumseagreen;
  }
}

.load:nth-child(2){
  animation-delay: .15s;
}
.load:nth-child(3){
  animation-delay: .3s;
}
.load:nth-child(4){
  animation-delay: .45s;
}