.ripple {
  display: none;
  height:50px;
  width:50px;
 
  z-index: 99999;
  margin: 60px auto;
  position:fixed;
  top:50%; left: 50%;
  margin-left: -25px;
  margin-top: -25px;
  
  -webkit-transition:height .25s ease, width .25s ease;
  transition:height .25s ease, width .25s ease;
 
 
}



.ripple:before,
.ripple:after {
  content:'';
  height:50px;
  width:50px;
  position:fixed;
  top:50%; left:50%;
  border-radius:50%;
  margin-left: -25px;
  margin-top: -25px;

  border:4px solid blue;
}

.ripple:before {
  -webkit-animation: ripple 2s linear infinite;
  animation: ripple 2s linear infinite;
}
.ripple:after {
  -webkit-animation: ripple 2s linear 1s infinite;
  animation: ripple 2s linear 1s infinite;
}



@-webkit-keyframes ripple{
  0% {-webkit-transform:scale(1); }
  50% {-webkit-transform:scale(1.75); opacity:1;}
  100% {-webkit-transform:scale(2); opacity:0;}
}

@keyframes ripple{
  0% {transform:scale(0.1); }
  50% {transform:scale(0.5); opacity:1;}
  100% {transform:scale(1); opacity:0;}
}