Loading Cubo – Animação Loading Css

Loading Cubo – Animação Loading Css

Neste tutorial vamos fazer um loading com css com formado de cubo com css.

Vamos Adicionar o Html:

<div class="loading-cubo">
  <span></span>
</div>

Vamos Adicionar o Css:

.loading-cubo{

	width: 30px;
	height: 30px;
	display: inline-block;
	text-align: left;
	border: 3px #f4f4f4 solid;
	padding: 0;
	border-radius: 3px;
	background: #fff;

}

.loading-cubo span {

	vertical-align:top;
	position:relative;
	display:inline-block;
	width:12px;
	height:12px;
	border-radius:2px; 
	background:#4c4c4c;
	opacity:0.75;
	-webkit-animation:loading-cubo 1.3s linear infinite;
	animation:loading-cubo 1.3s linear infinite;
}

@keyframes loading-cubo {

    0%   { left:0px; top:0px; }
    25%  { left:12px; top:0px; }
    50%  { left:12px; top:12px; }
    75%  { left:0px; top:12px; }
    100% { left:0px; top:0px; }
}

@-webkit-keyframes loading-cubo {

    0%   { left:0px; top:0px; }
    25%  { left:12px; top:0px; }
    50%  { left:12px; top:12px; }
    75%  { left:0px; top:12px; }
    100% { left:0px; top:0px; }
}

Veja o Resultado!

Baixar Código Veja Funcionando