Loading Clássico com Css

Loading Clássico com Css

Neste artigo vamos fazer um loading com efeito Clássico css.

Vamos adicionar o html:

<div class="loading-classico">

    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>

</div>

Vamos adicionar o css:

.loading-classico{

	width:40px;
	height:40px;
	display:inline-block;
	padding:0px;
	text-align:left;
	-webkit-animation:loading-classico 1.3s linear infinite;
	animation:loading-classico 1.3s linear infinite;
}

.loading-classico span {
	
	width:7px;
	height:7px;
	border-radius:100%;
	background:#797979;
	position:absolute;
	vertical-align:top;
	display:inline-block;
	margin-left:16px;
	transform-origin:center 20px;
	-webkit-transform-origin:center 20px;
}

.loading-classico span:nth-child(2) {transform: rotate(36deg);-webkit-transform: rotate(36deg); opacity:0.05;}
.loading-classico span:nth-child(3) {transform: rotate(72deg);-webkit-transform: rotate(72deg); opacity:0.1;}
.loading-classico span:nth-child(4) {transform: rotate(108deg);-webkit-transform: rotate(108deg); opacity:0.2;}
.loading-classico span:nth-child(5) {transform: rotate(144deg);-webkit-transform: rotate(144deg); opacity:0.3;}
.loading-classico span:nth-child(6) {transform: rotate(180deg);-webkit-transform: rotate(180deg); opacity:0.4;}
.loading-classico span:nth-child(7) {transform: rotate(216deg);-webkit-transform: rotate(216deg); opacity:0.5;}
.loading-classico span:nth-child(8) {transform: rotate(252deg);-webkit-transform: rotate(252deg); opacity:0.6;}
.loading-classico span:nth-child(9) {transform: rotate(288deg);-webkit-transform: rotate(288deg); opacity:0.7;}
.loading-classico span:nth-child(10) {transform: rotate(324deg);-webkit-transform: rotate(324deg); opacity:0.8;}

@keyframes loading-classico{

    from {transform: rotate(0deg);}
    to   {transform: rotate(360deg);}
}

@-webkit-keyframes loading-classico{

    from {-webkit-transform: rotate(0deg);}
      to {-webkit-transform: rotate(360deg);}
}

Veja o Resultado!

Baixar Código Veja Funcionando