Loading Três Pontinhos com Css

Neste artigo vamos fazer um loading com três pontinhos com loop infinito com css.

Vamos Adicionar o Html:

<div class="loader-tres-pontinhos">
                   
    <span></span>
    <span></span>
    <span></span>
                
</div>

Vamos Adicionar o Css:

.loader-tres-pontinhos {
	
	outline: 1px solid transparent;
	font-size:0px;
	padding:0px;
	display:inline-block;

}

.loader-tres-pontinhos span {

        background:#33dbdf;
	border-radius:100%;
	vertical-align:middle;
	display:inline-block;
	width:18px;
	height:18px;
	margin:2px 2px;
	-webkit-animation:loader-tres-pontinhos 0.8s linear infinite alternate;
	animation:loader-tres-pontinhos 0.8s linear infinite alternate;
}

.loader-tres-pontinhos span:nth-child(1){

	-webkit-animation-delay:-0.8;
	animation-delay:-0.8s;

}

.loader-tres-pontinhos span:nth-child(2) {
	-webkit-animation-delay:-0.53333s;
	animation-delay:-0.53333s;
}

.loader-tres-pontinhos span:nth-child(3) {

	-webkit-animation-delay:-0.26666s;
	animation-delay:-0.26666s;
}

@keyframes loader-tres-pontinhos{

    from {transform: scale(0, 0);}
    to {transform: scale(1, 1);}
}

@-webkit-keyframes loader-tres-pontinhos{

    from {-webkit-transform: scale(0, 0);}
    to {-webkit-transform: scale(1, 1);}
}

Veja o Resultado !

Baixar Código Veja Funcionando