Animação de Bolinhas Loading Css

Animação de Bolinhas Loading Css

Neste tutorial veremos como criar uma animação de bolinhas loading Css e Html.

Nesta seção, projetaremos uma estrutura das seguintes tags abaixo. 

Tag: <div> e a tag <span> para inserirmos os itens spinner.

Essas tags usaremos para criar a nossa Animação de Bolinhas Loading com html e css.

Vamos Adicionar o HTML

    <div class="loading">
       <span class="bolinha"></span>
       <span class="bolinha"></span>
       <span class="bolinha"></span>
    </div>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar a nossa Animação de bolinhas Loading com css e html.

:root {
  
  --size: 30px;
  --corFundo: #272324;
  --corCafe: #590909;
  --corVermelhoEscuro: #b51818;
  --corVermelho: #ea3c3c;

}

.loading {
  --animacao: 1100ms;
}

.loading .bolinha {
 
  --item-size: calc(var(--size) / 2);
  width: var(--item-size);
  height: var(--item-size);
  display: inline-block;
  margin: 0 1px;
  border-radius: 50%;
  border: 3px solid var(--clr-spinner);
  animation: spinner-bolinha var(--animacao) ease-in-out infinite;
}

@keyframes spinner-bolinha {
  0%, 100% {
    transform: translateY(40%);
  }
  50% {
    transform: translateY(-40%);
  }
}
.loading .bolinha:nth-child(1) {
  --clr-spinner: var(--corVermelho);
  animation-delay: calc(var(--animacao) / 6 * -1);
}

.loading .bolinha:nth-child(2) {
  --clr-spinner: var(--corVermelhoEscuro);
  animation-delay: calc(var(--animacao) / 6 * -2);
}

.loading .bolinha:nth-child(3) {
  --clr-spinner: var(--corCafe);
  animation-delay: calc(var(--animacao) / 6 * -3);
}

Combinando as Duas seções acima Html e Css temos o seguinte Resultado!

Veja o Resultado baixo!

Baixar Código Veja Funcionando