Loading Bate e Volta
Postado: 3 de fevereiro de 2022
Tempo de Leitura: < 1 Minuto
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
Publicado por: Loop Nerd
1.614 Visualizações
Deixe um comentário