.spinner {
  margin: 100px auto;
  width: 40px;
  height: 40px;
  position: relative;
}

.cube1, .cube2 {
  background-color: #333;
  width: 15px;
  height: 15px;
  position: absolute;
  top: 0;
  left: 0;
  
  -webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
  animation: sk-cubemove 1.8s infinite ease-in-out;
}

.cube2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

@-webkit-keyframes sk-cubemove {
  25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
  50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
  75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
  100% { -webkit-transform: rotate(-360deg) }
}

@keyframes sk-cubemove {
  25% { 
    transform: translateX(42px) rotate(-90deg) scale(0.5);
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
  } 50% { 
    transform: translateX(42px) translateY(42px) rotate(-179deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
  } 50.1% { 
    transform: translateX(42px) translateY(42px) rotate(-180deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
  } 75% { 
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  } 100% { 
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
  }
}

/*

<div class="spinner">
  <div class="cube1"></div>
  <div class="cube2"></div>
</div>

*/

.lds-dual-ring {
  display: inline-block;
  width: 80px;
  height: 80px;
  margin: 15% auto !important;
}
.lds-dual-ring:after {

  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  border: 10px solid #008c45;
    border-color: #008c45 transparent #008c45 transparent;
  animation: lds-dual-ring 1.6s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/*
<div class="lds-dual-ring"></div>

*/


/*------- 5 cicles ----
  <svg width="350" height="200">
    <circle class="shape" />
    <circle class="shape" />
    <circle class="shape" />
    <circle class="shape" />
    <circle class="shape" />
  </svg>

*/


.shape {
  cy: 50;
  r: 20;
  animation: moveCircle 1250ms ease-in-out both infinite;
}

.shape:nth-child(1) {
  cx: 60;
  fill:  #4166b1;
}

.shape:nth-child(2) {
  cx: 120;
  fill: #4c6edb;
  animation-delay: 100ms;
}

.shape:nth-child(3) {
  cx: 180;
  fill: #24aad8;
  animation-delay: 200ms;
}

.shape:nth-child(4) {
  cx: 240;
  fill: #1ac7c2;
  animation-delay: 300ms;
}

.shape:nth-child(5) {
  cx: 300;
  fill: #1ddea3;
  animation-delay: 400ms;
}

@keyframes moveCircle {
  50% {
    cy: 150;
    r: 13;
  }
}