Loading Animation

Animation for mobile app

by Juan Muñoz

HTML

<div class="circulo-linea">
    <div class="circulo">LOADING</div>
</div>

CSS

body {
	background: #2389D8;
	font-family: 'Open Sans', sans-serif;
    padding-top:50px;
}

.circulo-linea {
	width: 200px;
	height: 200px;
	border: 2px solid #fff;
	border-radius: 100px;
	-webkit-animation: 1.5s pulse infinite;
	position: relative;
	left: 50%;
	top: 10%;
	margin-left: -100px;
}

.circulo {
	width: 170px;
	height: 170px;
	background: #fff;
	border-radius: 85px;
	position: absolute;
	top: 15px;
	left: 15px;
	line-height: 170px;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	color: #2389D8;
}

@-webkit-keyframes pulse { 
    0% { -webkit-transform: scale(0.8); } 
    50% { -webkit-transform: scale(1); } 
    100% { -webkit-transform: scale(0.8); } 
} 
@keyframes pulse { 
    0% { transform: scale(0.8); } 
    50% { transform: scale(1); } 
    100% { transform: scale(0.8); } 
}