$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;

    }

  }

}