<div class='ring-container'>

  <div class='ring1'></div>

  <div class='ring2'></div>

</div>

​

* {

  box-sizing: border-box;

}

​

body {

  display: flex;

  justify-content: center;

  align-items: center;

  padding-top: 50px;

  background-color: #9F2B68;

}

​

.ring-container {

  width: 100px;

  height: 100px;

  position: relative;

}

​

.ring1, .ring2 {

  position: absolute;

  inset: 0;

  background-color: transparent;

  width: 100%;

  height: 100%;

  border: 4px solid white;

  border-radius: 50%;

  animation: scale 800ms infinite;

}

​

.ring2 {

  animation-delay: 400ms;

}

​

@keyframes scale {

  from {

    transform: scale(0.2);

    opacity: 1;

  }

  to {

    transform: scale(1);

    opacity: 0;

  }

}