Animação Css Loading Pulsando

Animação Css Loading Pulsando

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

Vamos Adicionar o HTML

   <div class="loading">
     <span class="loading-pulsa"></span>
     <span class="loading-pulsa"></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: 40px;
  --cor-azul: #00cfd5;
  --cor-preto: #4c4c4c;

}

.loading {

  --animacao: 3000ms;
  position: relative;
  margin: auto;
  width: var(--size);
  height: var(--size);

}

.loading .loading-pulsa {

  position: absolute;
  top: calc(50% - var(--size) / 2);
  left: calc(50% - var(--size) / 2);
  width: var(--size);
  height: var(--size);
  background: var(--bg);
  border-radius: 50%;
  animation: pulsa var(--animacao) ease-in-out infinite;

}

@keyframes pulsa {
  0%, 100% {
    transform: scale(0.5);
    opacity: 1;
  }
  50% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.loading .loading-pulsa:nth-of-type(1) {
  --bg: var(--cor-azul);
}

.loading .loading-pulsa:nth-of-type(2) {
  --bg: var(--cor-preto);
  animation-delay: calc(var(--animacao) / -2);
}

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

Veja o Resultado baixo!

Baixar Código Veja Funcionando