Loading Bate e Volta

Postado: 3 de fevereiro de 2022

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

Vamos Adicionar o Html:

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

Vamos Adicionar o 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;
  }

}

Veja o Resultado !

Baixar Código Veja Funcionando

Publicado por: loopnerd

888 Visualizações

Deixe um comentário

O seu endereço de e-mail não será publicado.