Posted By

MohamedAlaa on 11/28/12

Tagged

Versions (?)

Last Edited at 11/28/12 05:58am

Statistics

Viewed 715 times

Favorited by 1 user(s)

Related snippets

CSS3 Ajax Loading Cross browser

/ Published in: HTML

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

Highlighted TextExpand

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

URL: http://seniorwebdesigner.com

Report this snippet Tweet