Create Material Design Hierarchical Loading Animations Using JavaScript and CSS3

Preview:

Description:

Makes use of JavaScript and CSS3 transitions/transforms to create hierarchical loading effects on a set of grids. Inspired by Google Material Design Hierarchical Timing.

How to use it:

Create a list of items that will animate in one by one.

<ul>
  <li class="demo"></li>
  <li class="demo"></li>
  <li class="demo"></li>
  <li class="demo"></li>
  <li class="demo"></li>
  <li class="demo"></li>
  <li class="demo"></li>
  <li class="demo"></li>
  <li class="demo"></li>
  <li class="demo"></li>
  <li class="demo"></li>
  <li class="demo"></li>
  <li class="demo"></li>
  <li class="demo"></li>
  <li class="demo"></li>
  <li class="demo"></li>
  <li class="demo"></li>
  <li class="demo"></li>
  <li class="demo"></li>
  <li class="demo"></li>
</ul>

The required CSS/CSS3 for the  Hierarchical Timing transition animations.

* { box-sizing: border-box; }
ul { list-style-type: none; }
li {
  float: left;
  width: 10%;
  height: 50vh;
  background: lightskyblue;
  -moz-transform: scale(0);
  -webkit-transform: scale(0);
  transform: scale(0);
  opacity: 0;
  border-bottom: 2px solid #b8e2fc;
  -moz-transition: all .3s ease-out;
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;
}
li:nth-child(odd) { background: #56baf8; }
li.show {
  opacity: 1;
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
}

The Javascript.

var item = document.querySelectorAll('.demo');
(function animate(counter) {
  
  setTimeout(function() {
    item[counter].classList.add('show');
    counter++;
    if(counter < item.length) animate(counter);
  }, 60);
  
})(0);