Loading Formato de Circulo com Css

Neste artigo vamos fazer um loading no formato de circulo com css.

Vamos Adicionar o Html:

<div class="loader-circulo"></div>

Vamos Adicionar o Css:

.loader-circulo
{
    width:35px;
    height:35px;
    display:inline-block;
    padding:0px;
    
    border-radius:100%;
    border:2px solid;
    border-top-color:rgba(225, 0, 0, 0.9);
    border-bottom-color:rgba(0,0,0, 0.20);
    border-left-color:rgba(225, 0, 0, 0.9);
    border-right-color:rgba(0,0,0, 0.20);
    
    -webkit-animation: loader-circulo 0.7s linear infinite;
    animation: loader-circulo 0.7s linear infinite;
}
@keyframes loader-circulo
{
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
@-webkit-keyframes loader-circulo
{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}

Veja o Código Funcionando.

Baixar Código Veja Funcionando