- Página Inicial
- Códigos CSS Prontos
- Loading Bate e Volta
- Voltar
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.697 Visualizações
Deixe um comentário