<div class="spinner">
  <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 class="bar9"></div>
  <div class="bar10"></div>
  <div class="bar11"></div>
  <div class="bar12"></div>
</div>

<style type="text/css">
div.spinner {
  position: relative;
  width: 14px;
  height: 14px;
  display: inline-block;
  top: 2px;
  left: 0;
}
.big_btn div.spinner  {width: 24px; height: 24px}
  div.spinner div {
    width: 11%;
    height: 26%;
    background: #B3CFE6;
    position: absolute;
    left: 44.5%;
    top: 37%;
    opacity: 0;
    -webkit-animation: spinner-fade 1s linear infinite;
    -webkit-border-radius: 50px;
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.2);
}
    
div.spinner div.bar1 {
  -webkit-transform:rotate(0deg) translate(0, -142%);
     -moz-transform:rotate(0deg) translate(0, -142%);
       -o-transform:rotate(0deg) translate(0, -142%);
      -ms-transform:rotate(0deg) translate(0, -142%);
          transform:rotate(0deg) translate(0, -142%);
  -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
     -ms-animation-delay: 0s;
      -o-animation-delay: 0s;
         animation-delay: 0s;
}
div.spinner div.bar2 {
  -webkit-transform: rotate(30deg) translate(0, -142%);
     -moz-transform: rotate(30deg) translate(0, -142%);
       -o-transform: rotate(30deg) translate(0, -142%);
      -ms-transform: rotate(30deg) translate(0, -142%);
          transform: rotate(30deg) translate(0, -142%);

  -webkit-animation-delay: -0.9167s;
     -moz-animation-delay: -0.9167s;
      -ms-animation-delay: -0.9167s;
       -o-animation-delay: -0.9167s;
          animation-delay: -0.9167s;
}

div.spinner div.bar3 {
  -webkit-transform: rotate(60deg) translate(0, -142%);
     -moz-transform: rotate(60deg) translate(0, -142%);
       -o-transform: rotate(60deg) translate(0, -142%);
      -ms-transform: rotate(60deg) translate(0, -142%);
          transform: rotate(60deg) translate(0, -142%);

  -webkit-animation-delay: -0.833s;
     -moz-animation-delay: -0.833s;
      -ms-animation-delay: -0.833s;
       -o-animation-delay: -0.833s;
          animation-delay: -0.833s;
}

div.spinner div.bar4 {
  -webkit-transform: rotate(90deg) translate(0, -142%);
     -moz-transform: rotate(90deg) translate(0, -142%);
       -o-transform: rotate(90deg) translate(0, -142%);
      -ms-transform: rotate(90deg) translate(0, -142%);
          transform: rotate(90deg) translate(0, -142%);

  -webkit-animation-delay: -0.75s;
     -moz-animation-delay: -0.75s;
      -ms-animation-delay: -0.75s;
       -o-animation-delay: -0.75s;
          animation-delay: -0.75s;
}

div.spinner div.bar5 {
  -webkit-transform: rotate(120deg) translate(0, -142%);
     -moz-transform: rotate(120deg) translate(0, -142%);
       -o-transform: rotate(120deg) translate(0, -142%);
      -ms-transform: rotate(120deg) translate(0, -142%);
          transform: rotate(120deg) translate(0, -142%);

  -webkit-animation-delay: -0.667s;
     -moz-animation-delay: -0.667s;
      -ms-animation-delay: -0.667s;
       -o-animation-delay: -0.667s;
          animation-delay: -0.667s;
}

div.spinner div.bar6 {
  -webkit-transform: rotate(150deg) translate(0, -142%);
     -moz-transform: rotate(150deg) translate(0, -142%);
       -o-transform: rotate(150deg) translate(0, -142%);
      -ms-transform: rotate(150deg) translate(0, -142%);
          transform: rotate(150deg) translate(0, -142%);

  -webkit-animation-delay: -0.5833s;
     -moz-animation-delay: -0.5833s;
      -ms-animation-delay: -0.5833s;
       -o-animation-delay: -0.5833s;
          animation-delay: -0.5833s;
}

div.spinner div.bar7 {
  -webkit-transform: rotate(180deg) translate(0, -142%);
     -moz-transform: rotate(180deg) translate(0, -142%);
       -o-transform: rotate(180deg) translate(0, -142%);
      -ms-transform: rotate(180deg) translate(0, -142%);
          transform: rotate(180deg) translate(0, -142%);

  -webkit-animation-delay: -0.5s;
     -moz-animation-delay: -0.5s;
      -ms-animation-delay: -0.5s;
       -o-animation-delay: -0.5s;
          animation-delay: -0.5s;
}

div.spinner div.bar8 {
  -webkit-transform: rotate(210deg) translate(0, -142%);
     -moz-transform: rotate(210deg) translate(0, -142%);
       -o-transform: rotate(210deg) translate(0, -142%);
      -ms-transform: rotate(210deg) translate(0, -142%);
          transform: rotate(210deg) translate(0, -142%);

  -webkit-animation-delay: -0.41667s;
     -moz-animation-delay: -0.41667s;
      -ms-animation-delay: -0.41667s;
       -o-animation-delay: -0.41667s;
          animation-delay: -0.41667s;
}

div.spinner div.bar9 {
  -webkit-transform: rotate(240deg) translate(0, -142%);
     -moz-transform: rotate(240deg) translate(0, -142%);
       -o-transform: rotate(240deg) translate(0, -142%);
      -ms-transform: rotate(240deg) translate(0, -142%);
          transform: rotate(240deg) translate(0, -142%);

  -webkit-animation-delay: -0.333s;
     -moz-animation-delay: -0.333s;
      -ms-animation-delay: -0.333s;
       -o-animation-delay: -0.333s;
          animation-delay: -0.333s;
}

div.spinner div.bar10 {
  -webkit-transform: rotate(270deg) translate(0, -142%);
     -moz-transform: rotate(270deg) translate(0, -142%);
       -o-transform: rotate(270deg) translate(0, -142%);
      -ms-transform: rotate(270deg) translate(0, -142%);
          transform: rotate(270deg) translate(0, -142%);

  -webkit-animation-delay: -0.25s;
     -moz-animation-delay: -0.25s;
      -ms-animation-delay: -0.25s;
       -o-animation-delay: -0.25s;
          animation-delay: -0.25s;
}

div.spinner div.bar11 {
  -webkit-transform: rotate(300deg) translate(0, -142%);
     -moz-transform: rotate(300deg) translate(0, -142%);
       -o-transform: rotate(300deg) translate(0, -142%);
      -ms-transform: rotate(300deg) translate(0, -142%);
          transform: rotate(300deg) translate(0, -142%);

  -webkit-animation-delay: -0.1667s;
     -moz-animation-delay: -0.1667s;
      -ms-animation-delay: -0.1667s;
       -o-animation-delay: -0.1667s;
          animation-delay: -0.1667s;
}

div.spinner div.bar12 {
  -webkit-transform: rotate(330deg) translate(0, -142%);
     -moz-transform: rotate(330deg) translate(0, -142%);
       -o-transform: rotate(330deg) translate(0, -142%);
      -ms-transform: rotate(330deg) translate(0, -142%);
          transform: rotate(330deg) translate(0, -142%);

  -webkit-animation-delay: -0.0833s;
     -moz-animation-delay: -0.0833s;
      -ms-animation-delay: -0.0833s;
       -o-animation-delay: -0.0833s;
          animation-delay: -0.0833s;
}


 @-webkit-keyframes spinner-fade {
  from {opacity: 1;}
  to {opacity: 0.25;}
}
</style>

http://seniorwebdesigner.com

CSS3 Ajax Loading Animation
========

This is a simulation for the popular gif animated images. The reason why i choose to do it in css3 is the flexibility of re-using it in different sizes, different colors and the transparency issues in gif animated loaders.

Enjoy it ;)
--------

[Mohamed](http://seniorwebdesigner.com/ "My Portfolio")

Twitter: [@MohammedAlaa](http://twitter.com/MohammedAlaa "@MohammedAlaa on Twitter")

CSS3 Ajax Loading Cross browser

ajax, html, CSS3

HTML