Loading Alterna

Loading Alterna

Neste tutorial vamos fazer um loading alternando com html e css.

Vamos Adicionar o Html:

 <div class="loader-alterna">
     <span></span>
     <span></span>
 </div>

Vamos Adicionar o Css:

.loader-alterna{

	width:40px;
	height:20px;
	display:inline-block;
	padding:0px;
	text-align:left;
}

.loader-alterna span {

	position:absolute;
	display:inline-block;
	width:20px;
	height:20px;
	
	border-radius:100%;
	background:#54c4c8;
	
	-webkit-animation:loader-alterna 0.5s linear infinite alternate;
	animation:loader-alterna 0.5s linear infinite alternate;
}
.loader-alterna span:last-child{

	animation-delay:-0.5s;
	-webkit-animation-delay:-0.5s;
	margin-left:20px;
}

@keyframes loader-alterna{

    0% {transform: scale(0, 0);}
    100% {transform: scale(1, 1);}
}

@-webkit-keyframes loader-alterna{

    0% {-webkit-transform: scale(0, 0);}
    100% {-webkit-transform: scale(1, 1);}
}

Veja o Resultado!

Baixar Código Veja Funcionando