Imágenes de carga con CSS3

Imágenes de carga con CSS3

Español | Online | Publicación:2013 | Free

Descripción:
Esto es algo muy útil y que nos da la posibilidad CSS3, seguro que viste esas imagenes que cargan en muchos sitios web pero no son imágenes sino efectos que se logra con CSS3, pues hoy veremos como lograr ese efecto solo con CSS y un pequeño script.
*Solo funcionaría en Firefox,Chrome,safari, Opera

Son dos modelos que usan el mismo tipo de código HTML:

<div id="nombre"> <div class="bar1"> </div> <div class="bar2"> </div> <div class="bar3"> </div> <div class="bar4"> </div> <div class="bar5"> </div> <div class="bar6"> </div> <div class="bar7"> </div> <div class="bar8"> </div> </div>

En estos ejemplos, el nombreUnico de uno es div1 y el del otro es div2.

El CSS tiene elementos en común para ambos y algunos diferentes lo que produce que uno se vea como barras y el otro como círculos, agragamos el css:
/* se posiciona cada div, rotándolos */ .bar1 { -moz-transform:rotate(0deg) translate(0, -40px); -webkit-transform:rotate(0deg) translate(0, -40px);opacity:0.12; } .bar2 { -moz-transform:rotate(45deg) translate(0, -40px); -webkit-transform:rotate(45deg) translate(0, -40px);opacity:0.25; } .bar3 { -moz-transform:rotate(90deg) translate(0, -40px); -webkit-transform:rotate(90deg) translate(0, -40px);opacity:0.37; } .bar4 { -moz-transform:rotate(135deg) translate(0, -40px); -webkit-transform:rotate(135deg) translate(0, -40px);opacity:0.50; } .bar5 { -moz-transform:rotate(180deg) translate(0, -40px); -webkit-transform:rotate(180deg) translate(0, -40px);opacity:0.62; } .bar6 { -moz-transform:rotate(225deg) translate(0, -40px); -webkit-transform:rotate(225deg) translate(0, -40px);opacity:0.75; } .bar7 { -moz-transform:rotate(270deg) translate(0, -40px); -webkit-transform:rotate(270deg) translate(0, -40px);opacity:0.87; } .bar8 { -moz-transform:rotate(315deg) translate(0, -40px); -webkit-transform:rotate(315deg) translate(0, -40px);opacity:1; } /* este es el modelo tipo barras */ #div1 { height:100px; position:relative; width:100px; -moz-border-radius:100px; -moz-transform:scale(0.5); -webkit-transform:scale(0.5); -webkit-animation-name: rotateThis; -webkit-animation-duration:2s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear; } #div1 div { background:#FFF; height:30px; left:45px; position:absolute; top:35px; width:10px; } /* y la sombra */ #div1 div { -moz-box-shadow:white 0 0 4px; -webkit-box-shadow:white 0 0 4px } /* este es el modelo tipo círculo */ #div2 { height:100px; position:relative; width:100px; -moz-border-radius:100px; -webkit-border-radius:100px; -moz-transform:scale(0.5); -webkit-transform:scale(0.5); -webkit-animation-name: rotateThis; -webkit-animation-duration:2s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear; } #div2 div { background:#FFF; height:20px; left:40px; position:absolute; top:40px; width:20px; -moz-border-radius:40px; -webkit-border-radius:40px; } /* y la sombra */ #div2 div { -moz-box-shadow:white 0 0 4px; -webkit-box-shadow:white 0 0 4px; } /* esto, prouce una animación exclusiva en Chorme/Safari */ @-webkit-keyframes rotateThis { from {-webkit-transform:scale(0.5) rotate(0deg);} to {-webkit-transform:scale(0.5) rotate(360deg);} }


 Y al final agregamos el script que genera el efecto:
<script> var count = 0; function rotate() { var elem1 = document.getElementById('div1'); var elem2 = document.getElementById('div2'); elem1.style.MozTransform = 'scale(0.5) rotate('+count+'deg)'; elem2.style.MozTransform = 'scale(0.5) rotate('+count+'deg)'; elem1.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)'; elem2.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)'; count+=45; window.setTimeout(rotate, 100); } window.setTimeout(rotate, 100); </script>

Y el Resultado serìa este: