<div class="loader">
  <div class="pulse pulse1"></div>
  <div class="pulse pulse2"></div>
</div>

.loader{
  /* Make sure it's a circle */
  width: 32px;
  height: 32px;
  
  /* Make it be a circle */
  border-radius: 50%;
  
  /* Make sure the children will behave */
  position: relative;
  
  /* Give it some space */
  margin: 2rem auto;
}
.loader .pulse{
  /* The color and thickness of the pulse */
  border: 3px solid blue;
  
  /* Make sure the pulses don't interfere */
  position: absolute;
  
  /* Fill up the parent */
  width: 100%;
  height: 100%;
  
  /* Make it round */
  border-radius: inherit;
  
  /* Scale down */
  transform: scale(0.5);
  
  /* Make it smooth */
  transition: opacity 200ms linear;
}
.loader .pulse1{
  animation: pulse 1s infinite;
}
.loader .pulse2{
  animation: pulse 1s 500ms linear infinite;
}

@keyframes pulse{
  to{
    transform: scale(2);
    opacity: 0;
  }
}