Advanced Search

CSS3 Ajax Loading Cross browser

/ Published in: HTML
Save to your folder(s)
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")

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <div class="spinner">
  2.   <div class="bar1"></div>
  3.   <div class="bar2"></div>
  4.   <div class="bar3"></div>
  5.   <div class="bar4"></div>
  6.   <div class="bar5"></div>
  7.   <div class="bar6"></div>
  8.   <div class="bar7"></div>
  9.   <div class="bar8"></div>
  10.   <div class="bar9"></div>
  11.   <div class="bar10"></div>
  12.   <div class="bar11"></div>
  13.   <div class="bar12"></div>
  14. </div>
  15.  
  16. <style type="text/css">
  17. div.spinner {
  18.   position: relative;
  19.   width: 14px;
  20.   height: 14px;
  21.   display: inline-block;
  22.   top: 2px;
  23.   left: 0;
  24. }
  25. .big_btn div.spinner  {width: 24px; height: 24px}
  26.   div.spinner div {
  27.     width: 11%;
  28.     height: 26%;
  29.     background: #B3CFE6;
  30.     position: absolute;
  31.     left: 44.5%;
  32.     top: 37%;
  33.     opacity: 0;
  34.     -webkit-animation: spinner-fade 1s linear infinite;
  35.     -webkit-border-radius: 50px;
  36.     -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.2);
  37. }
  38.  
  39. div.spinner div.bar1 {
  40.   -webkit-transform:rotate(0deg) translate(0, -142%);
  41.      -moz-transform:rotate(0deg) translate(0, -142%);
  42.        -o-transform:rotate(0deg) translate(0, -142%);
  43.       -ms-transform:rotate(0deg) translate(0, -142%);
  44.           transform:rotate(0deg) translate(0, -142%);
  45.   -webkit-animation-delay: 0s;
  46.     -moz-animation-delay: 0s;
  47.      -ms-animation-delay: 0s;
  48.       -o-animation-delay: 0s;
  49.          animation-delay: 0s;
  50. }
  51. div.spinner div.bar2 {
  52.   -webkit-transform: rotate(30deg) translate(0, -142%);
  53.      -moz-transform: rotate(30deg) translate(0, -142%);
  54.        -o-transform: rotate(30deg) translate(0, -142%);
  55.       -ms-transform: rotate(30deg) translate(0, -142%);
  56.           transform: rotate(30deg) translate(0, -142%);
  57.  
  58.   -webkit-animation-delay: -0.9167s;
  59.      -moz-animation-delay: -0.9167s;
  60.       -ms-animation-delay: -0.9167s;
  61.        -o-animation-delay: -0.9167s;
  62.           animation-delay: -0.9167s;
  63. }
  64.  
  65. div.spinner div.bar3 {
  66.   -webkit-transform: rotate(60deg) translate(0, -142%);
  67.      -moz-transform: rotate(60deg) translate(0, -142%);
  68.        -o-transform: rotate(60deg) translate(0, -142%);
  69.       -ms-transform: rotate(60deg) translate(0, -142%);
  70.           transform: rotate(60deg) translate(0, -142%);
  71.  
  72.   -webkit-animation-delay: -0.833s;
  73.      -moz-animation-delay: -0.833s;
  74.       -ms-animation-delay: -0.833s;
  75.        -o-animation-delay: -0.833s;
  76.           animation-delay: -0.833s;
  77. }
  78.  
  79. div.spinner div.bar4 {
  80.   -webkit-transform: rotate(90deg) translate(0, -142%);
  81.      -moz-transform: rotate(90deg) translate(0, -142%);
  82.        -o-transform: rotate(90deg) translate(0, -142%);
  83.       -ms-transform: rotate(90deg) translate(0, -142%);
  84.           transform: rotate(90deg) translate(0, -142%);
  85.  
  86.   -webkit-animation-delay: -0.75s;
  87.      -moz-animation-delay: -0.75s;
  88.       -ms-animation-delay: -0.75s;
  89.        -o-animation-delay: -0.75s;
  90.           animation-delay: -0.75s;
  91. }
  92.  
  93. div.spinner div.bar5 {
  94.   -webkit-transform: rotate(120deg) translate(0, -142%);
  95.      -moz-transform: rotate(120deg) translate(0, -142%);
  96.        -o-transform: rotate(120deg) translate(0, -142%);
  97.       -ms-transform: rotate(120deg) translate(0, -142%);
  98.           transform: rotate(120deg) translate(0, -142%);
  99.  
  100.   -webkit-animation-delay: -0.667s;
  101.      -moz-animation-delay: -0.667s;
  102.       -ms-animation-delay: -0.667s;
  103.        -o-animation-delay: -0.667s;
  104.           animation-delay: -0.667s;
  105. }
  106.  
  107. div.spinner div.bar6 {
  108.   -webkit-transform: rotate(150deg) translate(0, -142%);
  109.      -moz-transform: rotate(150deg) translate(0, -142%);
  110.        -o-transform: rotate(150deg) translate(0, -142%);
  111.       -ms-transform: rotate(150deg) translate(0, -142%);
  112.           transform: rotate(150deg) translate(0, -142%);
  113.  
  114.   -webkit-animation-delay: -0.5833s;
  115.      -moz-animation-delay: -0.5833s;
  116.       -ms-animation-delay: -0.5833s;
  117.        -o-animation-delay: -0.5833s;
  118.           animation-delay: -0.5833s;
  119. }
  120.  
  121. div.spinner div.bar7 {
  122.   -webkit-transform: rotate(180deg) translate(0, -142%);
  123.      -moz-transform: rotate(180deg) translate(0, -142%);
  124.        -o-transform: rotate(180deg) translate(0, -142%);
  125.       -ms-transform: rotate(180deg) translate(0, -142%);
  126.           transform: rotate(180deg) translate(0, -142%);
  127.  
  128.   -webkit-animation-delay: -0.5s;
  129.      -moz-animation-delay: -0.5s;
  130.       -ms-animation-delay: -0.5s;
  131.        -o-animation-delay: -0.5s;
  132.           animation-delay: -0.5s;
  133. }
  134.  
  135. div.spinner div.bar8 {
  136.   -webkit-transform: rotate(210deg) translate(0, -142%);
  137.      -moz-transform: rotate(210deg) translate(0, -142%);
  138.        -o-transform: rotate(210deg) translate(0, -142%);
  139.       -ms-transform: rotate(210deg) translate(0, -142%);
  140.           transform: rotate(210deg) translate(0, -142%);
  141.  
  142.   -webkit-animation-delay: -0.41667s;
  143.      -moz-animation-delay: -0.41667s;
  144.       -ms-animation-delay: -0.41667s;
  145.        -o-animation-delay: -0.41667s;
  146.           animation-delay: -0.41667s;
  147. }
  148.  
  149. div.spinner div.bar9 {
  150.   -webkit-transform: rotate(240deg) translate(0, -142%);
  151.      -moz-transform: rotate(240deg) translate(0, -142%);
  152.        -o-transform: rotate(240deg) translate(0, -142%);
  153.       -ms-transform: rotate(240deg) translate(0, -142%);
  154.           transform: rotate(240deg) translate(0, -142%);
  155.  
  156.   -webkit-animation-delay: -0.333s;
  157.      -moz-animation-delay: -0.333s;
  158.       -ms-animation-delay: -0.333s;
  159.        -o-animation-delay: -0.333s;
  160.           animation-delay: -0.333s;
  161. }
  162.  
  163. div.spinner div.bar10 {
  164.   -webkit-transform: rotate(270deg) translate(0, -142%);
  165.      -moz-transform: rotate(270deg) translate(0, -142%);
  166.        -o-transform: rotate(270deg) translate(0, -142%);
  167.       -ms-transform: rotate(270deg) translate(0, -142%);
  168.           transform: rotate(270deg) translate(0, -142%);
  169.  
  170.   -webkit-animation-delay: -0.25s;
  171.      -moz-animation-delay: -0.25s;
  172.       -ms-animation-delay: -0.25s;
  173.        -o-animation-delay: -0.25s;
  174.           animation-delay: -0.25s;
  175. }
  176.  
  177. div.spinner div.bar11 {
  178.   -webkit-transform: rotate(300deg) translate(0, -142%);
  179.      -moz-transform: rotate(300deg) translate(0, -142%);
  180.        -o-transform: rotate(300deg) translate(0, -142%);
  181.       -ms-transform: rotate(300deg) translate(0, -142%);
  182.           transform: rotate(300deg) translate(0, -142%);
  183.  
  184.   -webkit-animation-delay: -0.1667s;
  185.      -moz-animation-delay: -0.1667s;
  186.       -ms-animation-delay: -0.1667s;
  187.        -o-animation-delay: -0.1667s;
  188.           animation-delay: -0.1667s;
  189. }
  190.  
  191. div.spinner div.bar12 {
  192.   -webkit-transform: rotate(330deg) translate(0, -142%);
  193.      -moz-transform: rotate(330deg) translate(0, -142%);
  194.        -o-transform: rotate(330deg) translate(0, -142%);
  195.       -ms-transform: rotate(330deg) translate(0, -142%);
  196.           transform: rotate(330deg) translate(0, -142%);
  197.  
  198.   -webkit-animation-delay: -0.0833s;
  199.      -moz-animation-delay: -0.0833s;
  200.       -ms-animation-delay: -0.0833s;
  201.        -o-animation-delay: -0.0833s;
  202.           animation-delay: -0.0833s;
  203. }
  204.  
  205.  
  206.  @-webkit-keyframes spinner-fade {
  207.   from {opacity: 1;}
  208.   to {opacity: 0.25;}
  209. }
  210. </style>

URL: http://seniorwebdesigner.com

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.