Animação Css Loading Barrinhas Vertical Animada

Animação Css Loading Barrinhas Vertical Animada

Neste tutorial veja como criar uma animação de Barrinhas Vertical com Css e Html.

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

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

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

Vamos Adicionar o HTML

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

Vamos Adicionar o CSS

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

:root {

    --size: 50px;
    --corPreto: #4c4c4c;
    --corAzulClaro: #acf8fa;
    --corAzul: #5ad3d8;

}

.loading {

  --tempo: 1000ms;
  width: var(--size);
  height: var(--size);
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin: auto;

}

.loading .barra {

  width: calc(var(--size) / 10);
  height: 75%;
  background: var(--spinner);
  animation: spinner1 var(--tempo) ease-in-out infinite;

}

@keyframes spinner1 {
  50% {
    transform: scaleY(0.25);
  }
}

.loading .barra:nth-child(1) {
  --spinner: var(--corPreto);
  animation-delay: calc(var(--tempo) / 10 * -5);
}

.loading .barra:nth-child(2) {
  --spinner: var(--corAzul);
  animation-delay: calc(var(--tempo) / 10 * -1);
}

.loading .barra:nth-child(3) {
  --spinner: var(--corAzulClaro);
  animation-delay: calc(var(--tempo) / 10 * -2);
}

.loading .barra:nth-child(4) {
  --spinner: var(--corAzul);
  animation-delay: calc(var(--tempo) / 10 * -1);
}

.loading .barra:nth-child(5) {
  --spinner: var(--corPreto);
  animation-delay: calc(var(--tempo) / 10 * -5);
}

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

Veja o Resultado baixo!

Baixar Código Veja Funcionando