Imágenes de carga sin imágenes

Esto es sólo una curiosidad que muestra las posibilidades del CSS3 y que funcionará en Firefox y en navegadores basados en Webkit como Google Chrome y Safari.

Todos hemos visto esas imágenes de carga que giran y hay muchos sitios donde podemos descargarlas o crearlas pero estas, están creadas sólo con CSS y un pequeño script.

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

<div id="nombreUnico">
  <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:

<style>

  /* 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);}
  }

</style>

Por último, el script que genera la animación:

<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>

REFERENCIAS:kilianvalkhof.com