Loading – Efeito Transporte com Css

Loading – Efeito Transporte com Css

Neste tutorial vamos criar um loading com efeito de Transporte com css.

Vamos Adicionar o Html:

<div class="loading-transporte">

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

</div><!--Loading Transporte-->

Vamos Adicionar o Css:

.loading-transporte{

	width:72px;
	height:10px;
	display:inline-block;
	padding:0px;
	text-align:left;
}

.loading-transporte span {

	position:absolute;
	display:inline-block;
	background: #e00;
	width:10px;
	height:10px;
    opacity: 0.4;
	-webkit-animation:loading-transporte1 2s linear infinite alternate;
	animation:loading-transporte1 2s linear infinite alternate;

}

.loading-transporte span:nth-child(2) { animation-name:loading-transporte2; -webkit-animation-name:loading-transporte2; }
.loading-transporte span:nth-child(3) { animation-name:loading-transporte3; -webkit-animation-name:loading-transporte3; }
.loading-transporte span:nth-child(4) { animation-name:loading-transporte4; -webkit-animation-name:loading-transporte4; }
.loading-transporte span:nth-child(5) { animation-name:loading-transporte5; -webkit-animation-name:loading-transporte5; }

@keyframes loading-transporte1{
    0% {margin-left:0px;}
    50% {margin-left:64px;}
    100% {margin-left:64px;}
}

@-webkit-keyframes loading-transporte1{
    0% {margin-left:0px;}
    50% {margin-left:64px;}
    100% {margin-left:64px;}
}

@keyframes loading-transporte2{
    0% {margin-left:0px;}
    37.5% {margin-left:48px;}
    87.5% {margin-left:48px;}
    100% {margin-left:64px;}
}

@-webkit-keyframes loading-transporte2{
    0% {margin-left:0px;}
    37.5% {margin-left:48px;}
    87.5% {margin-left:48px;}
    100% {margin-left:64px;}
}

@keyframes loading-transporte3{
    0% {margin-left:0px;}
    25% {margin-left:32px;}
    75% {margin-left:32px;}
    100% {margin-left:64px;}
}

@-webkit-keyframes loading-transporte3{
    0% {margin-left:0px;}
    25% {margin-left:32px;}
    75% {margin-left:32px;}
    100% {margin-left:64px;}
}

@keyframes loading-transporte4{
    0% {margin-left:0px;}
    12.5% {margin-left:16px;}
    62.5% {margin-left:16px;}
    100% {margin-left:64px;}
}

@-webkit-keyframes loading-transporte4{
    0% {margin-left:0px;}
    12.5% {margin-left:16px;}
    62.5% {margin-left:16px;}
    100% {margin-left:64px;}
}

@keyframes loading-transporte5{
    0% {margin-left:0px;}
    50% {margin-left:0px;}
    100% {margin-left:64px;}
}

@-webkit-keyframes loading-transporte5{
    0% {margin-left:0px;}
    50% {margin-left:0px;}
    100% {margin-left:64px;}
}

Veja o Resultado !

Baixar Código Veja Funcionando