CSS3 Loading animations

Figure 1

Usually we use images in GIF format or use AJAX to implement dynamic add-ons such as this one, but now the CSS3 can be done with greater flexibility.

Choose 1 examples to see how it can be achieved:

：

Figure 2

Code:

Use 1 layers named ' Loading ' for all loaded content, how many entries are required to add so many div, and use the same class name ' Coloumns ', and add the respective deferred CSS code for each animation bar

HTML code

2. <div id=' loading '>
6. <div id= 'coloumn1 ' class=' coloumns '></div>
10. <div id= 'coloumn2 ' class=' coloumns '></div>
14. <div id= 'coloumn3 ' class=' coloumns '></div>
18. <div id= 'coloumn4 ' class=' coloumns '></div>
22. <div id= 'coloumn5 ' class=' coloumns '></div>
26. <div id= 'coloumn6 ' class=' coloumns '></div>
30. </div>

HTML code

2. #loading {
6. margin-top:30px;
10. Float:left;
14. width:95px;
18. height:32px;
26. margin-left:30px;
30. /* CSS3 rounded border */
34. -webkit-border-radius:5px;
38. -moz-border-radius:5px;
42. border-radius:5px;
44. }
48. . coloumns{
56. border:1px solid #fff;
60. Float:left;
64. height:30px;
68. margin-left:5px;
72. width:10px;
76. /* Here we define an animation name, and then we will implement it */
80. -webkit-animation-name:animation;
84. /* The total time of the animation cycle */
88. -webkit-animation-duration:3s;
92. /* The number of cycles of animation, we set to infinity */
96. -webkit-animation-iteration-count:infinite;
100. -webkit-animation-direction:linear;
104. /* Initially all columns have a transparency of 0 */
108. opacity:0;
112. /* Start by scaling it to 0.8 */
116. -webkit-transform:scale (0.8);
120. }
124. #coloumn1 {
128. /* First column animation delay 0.3 seconds */
132. -webkit-animation-delay:. 3s;
136. }
140. #coloumn2 {
144. /* Second column animation delay 0.4 seconds */
148. -webkit-animation-delay:. 4s;
152. }
156. #coloumn3 {
160. /* Third column animation delay 0.5 seconds */
164. -webkit-animation-delay:. 5s;
168. }
172. #coloumn4 {
176. /* Fourth Column animation delay 0.6 seconds */
180. -webkit-animation-delay:. 6s;
184. }
188. #coloumn5 {
192. /* Fourth Column animation delay 0.7 seconds */
196. -webkit-animation-delay:. 7s;
200. }
204. #coloumn6 {
208. /* Fourth column animation delay 0.8 seconds */
212. -webkit-animation-delay:. 8s;
216. }
220. /* Before we have defined the name of the animation, we set the properties of the animation here */
224. @-webkit-keyframes animation{
228. /* The transparency of each column at the beginning of the animation is 0 */
232. 0%{opacity:0;}
236. /* The transparency of each column in the middle of the animation is 1 */
240. 50%{opacity:1;}
244. /* The transparency of each column is restored to 0 at the end of the animation */
248. 100%{opacity:0;}
252. }

CSS3 Loading animations