html body{
  background-color:#2980b9;
  width:100%;
  height:100vh;
}
.table{
  width:100%;
  height:100%;
  display:table;
  .table--cell{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
  }
}
.loader{
  display:inline-block;
  width:120px;
  height:120px;
  .loader--ball{
    position:absolute;
    left:0;
    right:0;
    margin:0 auto;
    width:10px;
    height:10px;
    border-radius:50%;
    background:#ecf0f1;
    transform-origin:0 60px;
    display:block;
    animation: 2s rotate cubic-bezier(0.775, 0.030, 0.350, 1.000) infinite;
      @for $i from 1 through 4 {
      &:nth-child(#{$i}) { 
        animation-delay:(0.1s * $i); 
      }
    }
  }
}

@keyframes rotate { 
  0%   { transform: rotate(0deg); } 
  100% { transform: rotate(360deg); }
}

.loader--ball:first-child{
  background:none;
}
.loader--ball__first:before{
 content:'';
 width:10px;
 height:10px;
  position:absolute;
  z-index:10;
  top:0;
  bottom:0;
  background:#ecf0f1;
  display:block;
  border-radius:50%;
 animation:2s grow cubic-bezier(0.775, 0.035, 0.310, 1.000)   infinite;
}

@keyframes grow {
  0%, 
  10% {
       width:20px; 
       height:20px;
       top:-2px;
       left:-5px;
      }
  
  50% { 
    width:10px; 
    height:10px;
    left:-5px;
  }
  85%, 100% {
    width:20px; 
    height:20px;
    top:-2px;
    left:-5px;
  }
}