galaxy/loaders/csemszepp_quick-sloth-23.html

	<div class="wrapper">
		<div class="hoop"></div>
		<div class="sphere1"></div>
		<div class="sphere2"></div>	
	</div>
<style>
/* From Uiverse.io by csemszepp - Source: https://codepen.io/pcameron/pen/jENMKG - Tags: loader, animated */
@-webkit-keyframes sphere1Move {
  0% {
    width: 50px;
    height: 50px;
    left: 116px;
    top: 116px;
    z-index: 0;
  }

  10% {
    width: 40px;
    height: 40px;
  }

  20% {
    width: 30px;
    height: 30px;
  }

  30% {
    width: 40px;
    height: 40px;
  }

  45% {
    left: 15px;
  }

  49% {
    z-index: 0;
  }

  50% {
    width: 50px;
    height: 50px;
    left: 20px;
    top: 116px;
    z-index: 10;
  }
	/*55%{left:15px;}*/
  60% {
    width: 60px;
    height: 60px;
  }

  80% {
    width: 70px;
    height: 70px;
  }

  90% {
    width: 60px;
    height: 60px;
  }

  99% {
    z-index: 10;
  }

  100% {
    width: 50px;
    height: 50px;
    left: 116px;
    top: 116px;
    z-index: 0;
  }
}

@keyframes sphere1Move {
  0% {
    width: 50px;
    height: 50px;
    left: 116px;
    top: 116px;
    z-index: 0;
  }

  10% {
    width: 40px;
    height: 40px;
  }

  20% {
    width: 30px;
    height: 30px;
  }

  30% {
    width: 40px;
    height: 40px;
  }

  45% {
    left: 15px;
  }

  49% {
    z-index: 0;
  }

  50% {
    width: 50px;
    height: 50px;
    left: 20px;
    top: 116px;
    z-index: 10;
  }
/*	55%{left:15px;}*/
  60% {
    width: 60px;
    height: 60px;
  }

  80% {
    width: 70px;
    height: 70px;
  }

  90% {
    width: 60px;
    height: 60px;
  }

  99% {
    z-index: 10;
  }

  100% {
    width: 50px;
    height: 50px;
    left: 116px;
    top: 116px;
    z-index: 0;
  }
}

@-webkit-keyframes sphere2Move {
  0% {
    width: 50px;
    height: 50px;
    left: 116px;
    top: 116px;
    z-index: 0;
  }

  10% {
    width: 40px;
    height: 40px;
  }

  20% {
    width: 30px;
    height: 30px;
  }

  30% {
    width: 40px;
    height: 40px;
  }

  45% {
    left: 217px;
  }

  49% {
    z-index: 0;
  }

  50% {
    width: 50px;
    height: 50px;
    left: 222px;
    top: 116px;
    z-index: 10;
  }
	/*55%{left:15px;}*/
  60% {
    width: 60px;
    height: 60px;
  }

  80% {
    width: 70px;
    height: 70px;
  }

  90% {
    width: 60px;
    height: 60px;
  }

  99% {
    z-index: 10;
  }

  100% {
    width: 50px;
    height: 50px;
    left: 116px;
    top: 116px;
    z-index: 0;
  }
}

@keyframes sphere2Move {
  0% {
    width: 50px;
    height: 50px;
    left: 116px;
    top: 116px;
    z-index: 0;
  }

  10% {
    width: 40px;
    height: 40px;
  }

  20% {
    width: 30px;
    height: 30px;
  }

  30% {
    width: 40px;
    height: 40px;
  }

  45% {
    left: 217px;
  }

  49% {
    z-index: 0;
  }

  50% {
    width: 50px;
    height: 50px;
    left: 222px;
    top: 116px;
    z-index: 10;
  }
	/*55%{left:15px;}*/
  60% {
    width: 60px;
    height: 60px;
  }

  80% {
    width: 70px;
    height: 70px;
  }

  90% {
    width: 60px;
    height: 60px;
  }

  99% {
    z-index: 10;
  }

  100% {
    width: 50px;
    height: 50px;
    left: 116px;
    top: 116px;
    z-index: 0;
  }
}

.wrapper {
  width: 300px;
  height: 300px;
	/*border:1px solid red;*/
  margin: 0 auto;
  margin-top: 5%;
  position: relative;
}

.hoop {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 0 6px #96281B, 0 0 0 26px #D64541;
  position: absolute;
  left: 100px;
  top: 100px;
  z-index: 5;
}

.sphere1 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #22A7F0;
  position: absolute;
  left: 116px;
  top: 116px;
  box-shadow: -7px -7px 0 #1E8BC3 inset;
  -webkit-animation: sphere1Move 1.2s linear infinite;
  animation: sphere1Move 1.2s linear infinite;
}

.sphere2 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #22A7F0;
  position: absolute;
  left: 116px;
  top: 116px;
  box-shadow: -7px -7px 0 #1E8BC3 inset;
  -webkit-animation: sphere2Move 1.2s linear 0.6s infinite;
  animation: sphere2Move 1.2s linear 0.6s infinite;
}
</style>