Loading Rounds Css Only

by Martin Miranda

HTML

<div id="container">
        <div id="round1" class="round" data-round="round1"></div>
        <div id="round2" class="round" data-round="round2"></div>
        <div id="round3" class="round" data-round="round3"></div>
        <div id="round4" class="round" data-round="round4"></div>
    </div>

SCSS

@keyframes azul{
    0%{
        left:40px;
        top:0px;
    }
    25%{
        left:0px;
        top:0px;
    }
    50%{
        left:0px;
        top:40px;
    }
    75%{
        left:40px;
        top:40px;
    }
    100%{
        left:40px;
        top:0px;
    }
}
@-moz-@keyframes azul{
    0%{
        left:40px;
        top:0px;
    }
    25%{
        left:0px;
        top:0px;
    }
    50%{
        left:0px;
        top:40px;
    }
    75%{
        left:40px;
        top:40px;
    }
    100%{
        left:40px;
        top:0px;
    }
}

@keyframes amarillo{
    0%{
        left:0px;
        top:0px;
    }
    100%{
        left:-40px;
        top:0px;
    }
}
@-moz-@keyframes amarillo{
    0%{
        left:0px;
        top:0px;
    }
    100%{
        left:-40px;
        top:0px;
    }
}

@keyframes rojo{
    0%{
        left:40px;
        top:-40px;
    }
    50%{
        left:0px;
        top:-40px;
    }
    100%{
        left:0px;
        top:0px;
    }
}
@-moz-@keyframes rojo{
    0%{
        left:40px;
        top:0px;
    }
    50%{
        left:0px;
        top:0px;
    }
    100%{
        left:0px;
        top:40px;
    }
}

@keyframes verde{
    0%{
        left:0px;
        top:-40px;
    }
    25%{
        left:-40px;
        top:-40px; 
    }
    50%{
        left:-40px;
        top:0px;
    }
    100%{
        left:0px;
        top:0px;
    }
}
@-moz-@keyframes verde{
   0%{
        left:0px;
        top:-40px;
    }
    25%{
        left:-40px;
        top:-40px; 
    }
    50%{
        left:-40px;
        top:0px;
    }
    100%{
        left:0px;
        top:0px;
    }
}
body,html{
    width:100%;
    height:100%;
    margin:0 0;
    padding:0 0;
    background-color:rgba(230,230,230,,.7);
}
*{
    box-sizing:border-box;
}

#container{
    position:relative;
    margin:0 auto;
    width:100px;
   top:40%;
}
.round{
    width:35px;
    height:35px;
    border-radius:50%;
    position:relative;
    display:inline-block;
    top:0px;
   ...