body {
  background-color: #2c3e50;
}

.spinner {
  font-size: 200px;
  width: 1em;
  height: 1em;
  margin: 200px auto;
  position: relative;
  
  list-style: none;
  border-radius: 50%;
  border: .01em solid #bdc3c7;
}

.spinner li {
  width: .2em;
  height: .2em;
  position: absolute;
  border-radius: 50%;
} 

.spinner li:nth-child(1) {
  background: #3498db;
  top: 0;
  left: 50%;
  transform-origin: 50% 250%;
  animation:
    rota 1.13s linear infinite,
    opa 3.67s ease-in-out infinite alternate;
}

.spinner li:nth-child(2) {
  background: #e74c3c;
  top: 50%;
  rigth: 0;
  margin-top: -.1em;
  transform-origin: 150% 50%;
  animation:
    rota 1.86s linear infinite,
    opa 4.26s ease-in-out infinite alternate;
}

.spinner li:nth-child(3) {
  background: #f1c40f;
  bottom: 0;
  left: 50%;
  margin-left: -.1em;
  transform-origin: 50% -150%;
  animation:
    rota 1.45s linear infinite,
    opa 5.12s ease-in-out infinite alternate;
}

.spinner li:nth-child(4) {
  background: #2ecc71;
  top: 50%;
  left: 0;
  margin-top: -.1em;
  transform-origin: 250% 50%;
  animation:
    rota 1.72s linear infinite,
    opa 5.25s ease-in-out infinite alternate;
}

@keyframes rota {
  to {transform: rotate(360deg)}
}

@keyframes opa {
  12.0% {opacity: 0.80}
  19.5% {opacity: 0.88}
  37.2% {opacity: 0.64}
  40.5% {opacity: 0.52}
  52.7% {opacity: 0.69}
  60.2% {opacity: 0.60} 
  70.0% {opacity: 0.63}
  79.9% {opacity: 0.60}
  84.2% {opacity: 0.75}
  91.0% {opacity: 0.87}
}