.spinner {
    /* Size and position */
    font-size: 100px; /* 1em */
    width: 1em;
    height: 1em;

    position: relative;

    /* Styles */
    list-style: none;
    border-radius: 50%;
    border: .01em solid rgba(150,150,150,0.1); /* Subtle white line circling the dots */
}
.spinner li {
    width: .2em;
    height: .2em;
    position: absolute;
    border-radius: 50%;
}
.spinner li:nth-child(1) {
    background: #00C176; /* Blue */
    top: 0;
    left: 50%;
    margin-left: -.1em; /* 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: #FF003C; /* Red */
    top: 50%;
    right: 0;
    margin-top: -.1em; /* 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: #FABE28; /* Yellow */
    bottom: 0;
    left: 50%;
    margin-left: -.1em; /* 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: -.1em; /* 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; }
}