dev [CODE] Loader <3

[Luiiiz]

Fiz uma animacão de loader para vocês

Espero que gostem

 

HTML

<div class="container">
  <div class="item item1"></div>
  <div class="item item2"></div>
</div>

 

CSS 

.container {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
 
.item {
  width: 100px;
  height: 10px;
  position: absolute;
}
 
.item1 {
  background-color: #f1c40f;
  top: 0;
  left: 0;
  z-index: 1;
  animation: item1 1.8s infinite;
}
 
.item2 {
  background-color: #e67e22;
  top: 0;
  right: 0;
  animation: item2 1.8s infinite;
}
 
 
@keyframes item1 {
  0%, 100% {transform: translate(0, 0); height: 10px; width: 20px;} 
  25% {transform: translate(50px, 0px); height: 10px; width: 100px;} 
  50% {transform: translate(50px, 50px); height: 100px; width: 100px;}
  75% {transform: translate(50px, 0px); height: 10px; width: 100px;}
}
 
@keyframes item2 {
  0%, 100% {transform: translate(0, 0); height: 10px; width: 20px;} 
  25% {transform: translate(-50px, 0);  height: 10px; width: 100px;}
  50% {transform: translate(-50px, -50px); height: 100px; width: 100px;} 
  75% {transform: translate(-50px, 0px); height: 10px; width: 100px;} 
}
 

 

Para copiar melhor  e ver a animacão: https://codepen.io/Luiiiiz/pen/KvroPR

Editado Agosto 30, 2017 por Luiiiz

[Leeow]

Bela programação. Poderia adicionar alguma print/gif com a prévia? :v

[quando eu tinha uma glock]

parece tão simples ;-; mas nem assim eu conseguiria 

barabains

obg

[Luiiiz]

 

Bela programação. Poderia adicionar alguma print/gif com a prévia? :v

 

Vou deixar link do codepen ali para pegar o code mais facilmente e ja ve a animacao

 

parece tão simples ;-; mas nem assim eu conseguiria 

barabains

obg

 

Kkk  obr

[kFlash_]

Parabéns, lembro do seu inicio, menino de ouro.

[Luiiiz]

Parabéns, lembro do seu inicio, menino de ouro.

Opa sei que lembra kkk te enchia as vezes kk obr

[Lonely]

Ficou muito bom, em breve vou até usar

[Luiiiz]

Ficou muito bom, em breve vou até usar

vlww