Animação loading css

Animação loading css

Neste tutorial veremos como criar uma animação 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 Loading com html e css.

Vamos Adicionar o HTML

     <div class="spinner">
        <span class="spinner-item"></span>
        <span class="spinner-item"></span>
        <span class="spinner-item"></span>
     </div>

Vamos Adicionar o CSS

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

:root {

  --size: 80px;
  --corBlack: #2f2b2c;
  --corVerde: #b7d995;
  --corAmarelo: #eed77b;
  --corRosa: #ea9d9d;

}

.spinner {

  --tempo: 5000ms;
  position: relative;
  width: var(--size);
  height: var(--size);
  transform: rotate(45deg);
  margin: auto;

}

.spinner .spinner-item {
  --item-size: calc(var(--size) / 2.5);
  position: absolute;
  width: var(--item-size);
  height: var(--item-size);
  border: 4px solid var(--clr-spinner);
}
.spinner .spinner-item:nth-child(1) {
  --clr-spinner: var(--corVerde);
  top: 0;
  left: 0;
  animation: spinner3A var(--tempo) linear infinite;
}
@keyframes spinner3A {
  0%, 8.33%, 16.66%, 100% {
    transform: translate(0%, 0%);
  }
  24.99%, 33.32%, 41.65% {
    transform: translate(100%, 0%);
  }
  49.98%, 58.31%, 66.64% {
    transform: translate(100%, 100%);
  }
  74.97%, 83.30%, 91.63% {
    transform: translate(0%, 100%);
  }
}
.spinner .spinner-item:nth-child(2) {
  --clr-spinner: var(--corAmarelo);
  top: 0;
  left: var(--item-size);
  animation: spinner3B var(--tempo) linear infinite;
}
@keyframes spinner3B {
  0%, 8.33%, 91.63%, 100% {
    transform: translate(0%, 0%);
  }
  16.66%, 24.99%, 33.32% {
    transform: translate(0%, 100%);
  }
  41.65%, 49.98%, 58.31% {
    transform: translate(-100%, 100%);
  }
  66.64%, 74.97%, 83.30% {
    transform: translate(-100%, 0%);
  }
}

.spinner .spinner-item:nth-child(3) {
  --clr-spinner: var(--corRosa);
  top: var(--item-size);
  left: var(--item-size);
  animation: spinner3C var(--tempo) linear infinite;
}

@keyframes spinner3C {
  0%, 83.30%, 91.63%, 100% {
    transform: translate(0, 0);
  }
  8.33%, 16.66%, 24.99% {
    transform: translate(-100%, 0);
  }
  33.32%, 41.65%, 49.98% {
    transform: translate(-100%, -100%);
  }
  58.31%, 66.64%, 74.97% {
    transform: translate(0, -100%);
  }
}

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

Veja o Resultado baixo!

Baixar Código Veja Funcionando