Posted By

MohamedAlaa on 11/28/12

Tagged

ajax html CSS3 loading

Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

erikgeerling

CSS3 Ajax Loading Cross browser

/ Published in: HTML

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

Twitter: @MohammedAlaa

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>

Report this snippet Tweet

Comment:

You need to login to post a comment.

Posted By

Tagged

Versions (?)

Who likes this?

CSS3 Ajax Loading Cross browser

Related snippets

Choose a language for easy browsing: