<div class="loader">
  <div class="bubble-1"></div>
  <div class="bubble-2"></div>
</div>
.loader {
  position: relative;
  width: 45px;
  height: 45px;
  margin: 90px auto;  
  animation: spin 2s ease-in-out infinite;
}

.bubble-1,
.bubble-2 {
  position: absolute;
  top: 0;
  width: 25px;
  height: 25px;
  border-radius: 100%;
  background-color: #5FD9FF;
}

.bubble-2 {
  top: auto;
  bottom: 0;
}

.bubble-1, .bubble-2 {
  animation: bounce 2s ease-in-out infinite;
}

.bubble-2 {
  animation-delay: -1.0s;
}

@keyframes spin {
  100% {
    transform: rotate( 360deg );
  }
}

@keyframes bounce  {
  0%, 100% {
    transform: scale( 0.0 );
  }
  
  50% {
    transform: scale( 1.0 );
  }
}
/*
  Developed with love by Blu Frame

  http://blufra.me  
*/
Rerun