Loading Efeito Sonar com Css

Neste artigo vamos fazer um loading com efeito sonar css.

Vamos Adicionar o Html:

<div class="loading-sonar">

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

</div>

Vamos Adicionar o Css:

.loading-sonar{

	width:40px;
	height:40px;
	display:inline-block;
	padding:0px;
	text-align:left;
	outline: 1px solid transparent;
}

.loading-sonar span {

	position:absolute;
	display:inline-block;
	width:40px;
	height:40px;
	
	border-radius:100%;
	background:#fb0000;;
	
	-webkit-animation:loading-sonar 1.8s linear infinite;
	animation:loading-sonar 1.8s linear infinite;
}

.loading-sonar span:last-child {
	animation-delay:-0.8s;
	-webkit-animation-delay:-0.8s;
}

@keyframes loading-sonar{

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

@-webkit-keyframes loading-sonar {

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

}

Veja o Resultado!

Baixar Código Veja Funcionando