JSFiddle - React, Tailwind, and code Playground

by Jennifer Perrin

HTML

<div>
    <div class="loadingbar a"></div>
    <div class="loadingbar b"></div>
    <div class="loadingbar c"></div>
    <div class="loadingbar d"></div>
    <div class="loadingbar e"></div>
    <div class="loadingbar f"></div>
    <div class="loadingbar g"></div>
    <div class="loadingbar h"></div>
    <div class="loadingbar i"></div>
    <div class="loadingbar j"></div>
    <div class="loadingbar k"></div>
    <div class="loadingbar l"></div>
    <div class="loadingbar m"></div>
    <div class="loadingbar n"></div>
    <div class="loadingbar o"></div>
</div>

CSS

@keyframes woop {

  0%{
    height: 1em;

    margin-top: 2em;
    margin-bottom: 2em;

  }
  25%{
    height: 1em;

    margin-top: 2em;
    margin-bottom: 2em;
  }
 
  36%{
    height: 3em;

    margin-top: 1em;
    margin-bottom: 1em;

}
  47%{
 height: 3em;

    margin-top: 1em;
    margin-bottom: 1em;
  }
 
 
  55%{
    height: 1em;
    
    margin-top: 2em;
    margin-bottom: 2em;

  }



}

@-o-keyframes woop {

  0%{
    height: 1em;

    margin-top: 2em;
    margin-bottom: 2em;

  }
  25%{
    height: 1em;

    margin-top: 2em;
    margin-bottom: 2em;
  }
 
  36%{
    height: 3em;

    margin-top: 1em;
    margin-bottom: 1em;

}
  47%{
 height: 3em;

    margin-top: 1em;
    margin-bottom: 1em;
  }
 
 
  55%{
    height: 1em;
    
    margin-top: 2em;
    margin-bottom: 2em;

  }



}

@-moz-keyframes woop {

  0%{
    height: 1em;

    margin-top: 2em;
    margin-bottom: 2em;

  }
  25%{
    height: 1em;

    margin-top: 2em;
    margin-bottom: 2em;
  }
 
  36%{
    height: 3em;

    margin-top: 1em;
    margin-bottom: 1em;

}
  47%{
 height: 3em;

    margin-top: 1em;
    margin-bottom: 1em;
  }
 
 
  55%{
    height: 1em;
    
    margin-top: 2em;
    margin-bottom: 2em;

  }



}

@-webkit-keyframes woop {

  0%{
    height: 1em;

    margin-top: 2em;
    margin-bottom: 2em;

  }
  25%{
    height: 1em;

    margin-top: 2em;
    margin-bottom: 2em;
  }
 
  36%{
    height: 3em;

    margin-top: 1em;
    margin-bottom: 1em;

}
  47%{
 height: 3em;

    margin-top: 1em;
    margin-bottom: 1em;
  }
 
 
  55%{
    height: 1em;
    
    margin-top: 2em;
    margin-bottom: 2em;

  }



}

.loadingbar {

  float: left;
  width: 1em;
  height: 1em;

  margin-top: 2em;
  margin-bottom: 2em;


  -webkit-animation: woop 1.8s infinite;
     -moz-animation: woop 1.8s infinite;
       -o-animation: woop 1.8s infinite;
          animation: woop 1.4s infinite;
  -webkit-animation-timing-function: ease-out;
     -moz-animation-timing-function: ease-out;
      ...