Como hacer un 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); } }
0
Puntos
Puntos
1253
Visitas
Visitas
1
Resp
Resp
Por zerodarck hace 113 meses
Experto
Respuesta #1
aquí dejo una demo http://jsfiddle.net/datoweb/kfqmdrds/
0
Puntos
Puntos
Por zerodarck hace 113 meses
Experto