Loader circular con css3

A continuación un ejemplo para realizar un efecto loading circular usando solo CSS. En este caso a un solo elemento con clase “loader-circular”.
.loader-circular {
position: relative;
height: 60px;
width: 60px;
margin: 0 auto;
border-radius: 50%;
background-color: #eee;
-webkit-animation: animacion .6s linear 0s infinite;
-moz-animation: animacion .6s linear 0s infinite;
animation: animacion .6s linear 0s infinite;
}
.loader-circular:before,
.loader-circular:after {
content: ;
display: block;
position: absolute;
}
.loader-circular:before {
border-radius: 0 30px 30px 0;
height: 60px;
width: 50%;
top: 0;
right: 0;
background-image: -webkit-linear-gradient(#eee, #aaa);
background-image: -moz-linear-gradient(#eee, #aaa);
background-image: linear-gradient(#eee, #aaa);
}
.loader-circular:after {
border-radius: 50%;
height: 50px;
width: 50px;
top: 50%;
left: 50%;
background-color: #fff;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
@-webkit-keyframes animacion {
to { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes animacion {
to { -moz-transform: rotate(360deg); }
}
@keyframes animacion {
to { transform: rotate(360deg); }
}
Advertisements
Standard

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s