.spinner {
    /* Size and position */
    font-size: 100px;
    /* 1em */
    width: 2em;
    height: 2em;
    margin: 100px auto;
    position: relative;
    /* Styles */
    list-style: none;
    border-radius: 50%;
    border: 0.01em solid rgba(150,150,150,0.1);
    /* Subtle white line circling the dots */
  }
  
  .spinner li {
    width: 0.4em;
    height: 0.4em;
    position: absolute;
    border-radius: 50%;
  }
  
  .spinner li:nth-child(1) {
    background: #0a5090;
    /* Blue */
    top: 0;
    left: 50%;
    margin-left: -.2em;
    /* Width/2 */
    transform-origin: 50% 250%;
    animation: rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate;
  }
  
  .spinner li:nth-child(2) {
    background: #be1e2d;
    /* Red */
    top: 50%;
    right: 0;
    margin-top: -.2em;
    /* Height/2 */
    transform-origin: -150% 50%;
    animation: rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate;
  }
  
  .spinner li:nth-child(3) {
    background: #f9a11b;
    /* Yellow */
    bottom: 0;
    left: 50%;
    margin-left: -.2em;
    /* Width/2 */
    transform-origin: 50% -150%;
    animation: rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate;
  }
  
  .spinner li:nth-child(4) {
    background: #88C100;
    /* Green */
    top: 50%;
    left: 0;
    margin-top: -.2em;
    /* Height/2 */
    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;
    }
  
    66.6% {
      opacity: 0.52;
    }
  
    70.0% {
      opacity: 0.63;
    }
  
    79.9% {
      opacity: 0.60;
    }
  
    84.2% {
      opacity: 0.75;
    }
  
    91.0% {
      opacity: 0.87;
    }
  }
  @-webkit-keyframes fadeOut {
    from {
      opacity: 1;
    }
  
    to {
      opacity: 0;
    }
  }
  @keyframes fadeOut {
    from {
      opacity: 1;
    }
  
    to {
      opacity: 0;
    }
  }
  
  .fadeOut {
    -webkit-animation: fadeOut 500ms ease-in-out;
    animation: fadeOut 500ms ease-in-out;
  }
  @-webkit-keyframes fadeIn {
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }
  
  .fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
  }