JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div class=circle>  
  <div class=circle-1></div>
  <div class=circle-2></div>
  <div class=circle-3></div>
</div>

CSS

* {-moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;}
body { 
  margin: 80px;
}
.circle {
  background-color: #2F7DE1;
  border: 1px solid #2F7DE1;
  width: 100px;
  height: 100px;
  border-radius: 100px;
  position: relative;
}
.circle-1 {
  border: 1px solid #2F7DE1;
  width: 100px;
  height: 100px;
  border-radius: 100px;
  -webkit-animation: ripple 3s linear infinite;
  position: absolute;
}
.circle-2 {
  border: 1px solid #2F7DE1;
  width: 100px;
  height: 100px;
  border-radius: 100px;
  -webkit-animation: ripple 3s linear infinite 0.75s;
  position: absolute;
}


.circle-3 {
  border: 1px solid #2F7DE1;
  width: 100px;
  height: 100px;
  border-radius: 100px;
  -webkit-animation: ripple 3s linear infinite 1.5s;
  position: absolute;
}

@-webkit-keyframes ripple {
  from {
    -webkit-transform: scale(0);
    opacity: 1;
  }
  to {
    -webkit-transform: scale(3);
    opacity: 0;
  }
}