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

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

Report this snippet  

You need to login to post a comment.