$circleBaseSize: 20px; // Prefer an odd number to avoid pixel gaps
$circleNumber: 5; // Have to match the number of div.color in your html
$circleColor: #5ad; // Color of the circles
$circleBorderWidth: 2px;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  line-height: 100vh;
  text-align: center;
}

#container {
  display: inline-block;
  width: $circleNumber*$circleBaseSize;
  height: $circleNumber*$circleBaseSize;
  position: relative;
}

@for $i from 1 through $circleNumber {
  
  .circle:nth-child(#{$i}) {
    width: $i*$circleBaseSize;
    height: $i*$circleBaseSize;
    border-radius: 50%;
    border-width: $circleBorderWidth;
    border-style: solid;
    border-color: transparent;
    -webkit-transform-origin: center center;
    -webkit-animation: wave#{$i} 1.8s ease-in infinite;
    -webkit-animation-delay: $i*0.1s;
    
    position: absolute;
    top: ($circleNumber*$circleBaseSize/2)-($i*$circleBaseSize/2);
    left: ($circleNumber*$circleBaseSize/2)-($i*$circleBaseSize/2);
  }

  @-webkit-keyframes wave#{$i}{
    0% { 
      -webkit-transform: scale(1);
    }
    10% { 
      -webkit-transform: scale(1+0.3/$i);
      border-color: $circleColor;
    }
    20% { 
      -webkit-transform: scale(1);
    }
    100% { 
      -webkit-transform: scale(1);
      border-color: transparent;
    }
  }
}