Loading Bate e Volta

Neste artigo vamos fazer um loading com efeito de bate e volta com Css e Html.

Nesta seção, projetaremos uma estrutura simples na tag  <div>. 

Usaremos as classes (.box-loader, .loading, .loop) para dar o formato do botão e o efeito efeito de bate e volta com css.

Essas são as tags e classes que usaremos para criar o nosso carregamento com html e Css

Vamos Adicionar o Html:

      <div class="box-loader">
                  
          <div class="loading">
               <div class="loop"></div>
          </div>
                
      </div><!--box-loader-->

Vamos Adicionar o Css:

Nesta seção, usaremos algumas propriedades CSS para estilizar e animar o  nosso loading bate e volta com html e css.

.box-loader { 

  margin: auto;
  width: 80px;

}

.loading {

  width: 80px;
  height: 23px;
  -webkit-border-radius: 50px;
  background-color: rgb(217, 217, 217);

}

.loop {

  position: absolute;
  -webkit-border-radius: 50px;
  margin: 4px;
  width: 15px;
  height: 15px;
  background-color: #FFF;
  -webkit-animation: push 1s infinite linear;

}

@-webkit-keyframes push {

  50% {
    margin-left: 62px;
  }

}

Combinando as Duas seções acima Html e Css temos o seguinte Resultado do loading com html css!

Veja o Resultado !

Baixar Código Veja Funcionando