Ripple Effect

by Ankit Patidar

HTML

<html>
<head>
  <title>Ripple Loader Effect</title>
</head>
<body>
  <div>
    <div class="ripple"></div>
  </div>
</body>
</html>

CSS

/* body{margin: 0;min-height: 100vh;display: flex;justify-content: center;align-items: center;background-color: #222;} */
.ripple{background-color:#ff414d;display:inline-block;width:35px;height:35px;border-radius:50%;margin:0 50px;position:relative}
.ripple::before{animation-delay:0.2s;content:"";position:absolute;width:100%;height:100%;background-color:inherit;border-radius:50%;z-index:-1;animation:ripple 1.5s ease-out infinite}

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


/*
span:nth-child(2) {
  background-color: #ff7a00;
  //transform: scale(0.9);
}

span:nth-child(2)::before {
  animation-delay: 0.4s;
}

span:nth-child(3) {
  background-color: #28df99;
  //transform: scale(0.8);
}

span:nth-child(3)::before {
  animation-delay: 0.6s;
}

span:nth-child(4) {
  background-color: #81b214;
  //transform: scale(0.7);
}

span:nth-child(4)::before {
  animation-delay: 0.8s;
}


span:last-child {
  background-color: #f09ae9;
  //transform: scale(0.6);
}

span:last-child::before {
  animation-delay: 1s;
}
*/