Script Tutorials

CSS3 Loading elements

—

by

admin
in

In our new tutorial I will show you how to create pure CSS3 loading elements (without any images). I think that it can be interesting for you in order to decrease amount of extra images in your project. I prepared three different loading elements. Now, lets check how I made them.

Live Demo
download result

So, lets start

Step 1. HTML

You can see here three elements – our ‘loading’ elements. All of them are very easy – parent element with set of inner DIVs.

01 <div class="main_body">
02     <div class="element">
03         <div class="loading1">
04             <div></div>
05             <div></div>
06             <div></div>
07             <div></div>
08             <div></div>
09             <div></div>
10             <div></div>
11             <div></div>
12         </div>
13     </div>
14     <div class="element">
15         <div class="loading2">
16             <div></div>
17             <div></div>
18             <div></div>
19             <div></div>
20             <div></div>
21             <div></div>
22             <div></div>
23             <div></div>
24         </div>
25     </div>
26     <div class="element">
27         <div class="loading3">
28             <div></div>
29             <div></div>
30             <div></div>
31             <div></div>
32             <div></div>
33         </div>
34     </div>
35 </div>

Step 2. CSS

Now, the most interesting step, I will give you styles of each ‘loading’ element. Welcome to check styles of first one:

001 .loading1 {
002     height:100px;
003     position:relative;
004     width:80px;
005 }
006 .loading1 > div {
007     background-color:#FFFFFF;
008     height:30px;
009     position:absolute;
010     width:12px;
011     /* css3 radius */
012     -moz-border-radius:5px;
013     -webkit-border-radius:5px;
014     border-radius:5px;
015     /* css3 transform - scale */
016     -webkit-transform:scale(0.4);
017     -moz-transform:scale(0.4);
018     -o-transform:scale(0.4);
019     /* css3 animation */
020     -webkit-animation-name:loading1;
021     -webkit-animation-duration:1.04s;
022     -webkit-animation-iteration-count:infinite;
023     -webkit-animation-direction:linear;
024     -moz-animation-name:loading1;
025     -moz-animation-duration:1.04s;
026     -moz-animation-iteration-count:infinite;
027     -moz-animation-direction:linear;
028     -o-animation-name:loading1;
029     -o-animation-duration:1.04s;
030     -o-animation-iteration-count:infinite;
031     -o-animation-direction:linear;
032 }
033 .loading1 > div:nth-child(1) {
034     left:0;
035     top:36px;
036     /* css3 transform - rotate */
037     -webkit-transform:rotate(-90deg);
038     -moz-transform:rotate(-90deg);
039     -o-transform:rotate(-90deg);
040     /* css3 animation */
041     -webkit-animation-delay:0.39s;
042     -moz-animation-delay:0.39s;
043     -o-animation-delay:0.39s;
044 }
045 .loading1 > div:nth-child(2) {
046     left:10px;
047     top:13px;
048     /* css3 transform - rotate */
049     -webkit-transform:rotate(-45deg);
050     -moz-transform:rotate(-45deg);
051     -o-transform:rotate(-45deg);
052     /* css3 animation */
053     -webkit-animation-delay:0.52s;
054     -moz-animation-delay:0.52s;
055     -o-animation-delay:0.52s;
056 }
057 .loading1 > div:nth-child(3) {
058     left:34px;
059     top:4px;
060     /* css3 transform - rotate */
061     -webkit-transform:rotate(0deg);
062     -moz-transform:rotate(0deg);
063     -o-transform:rotate(0deg);
064     /* css3 animation */
065     -webkit-animation-delay:0.65s;
066     -moz-animation-delay:0.65s;
067     -o-animation-delay:0.65s;
068 }
069 .loading1 > div:nth-child(4) {
070     right:10px;
071     top:13px;
072     /* css3 transform - rotate */
073     -webkit-transform:rotate(45deg);
074     -moz-transform:rotate(45deg);
075     -o-transform:rotate(45deg);
076     /* css3 animation */
077     -webkit-animation-delay:0.78s;
078     -moz-animation-delay:0.78s;
079     -o-animation-delay:0.78s;
080 }
081 .loading1 > div:nth-child(5) {
082     right:0;
083     top:36px;
084     /* css3 transform - rotate */
085     -webkit-transform:rotate(90deg);
086     -moz-transform:rotate(90deg);
087     -o-transform:rotate(90deg);
088     /* css3 animation */
089     -webkit-animation-delay:0.91s;
090     -moz-animation-delay:0.91s;
091     -o-animation-delay:0.91s;
092 }
093 .loading1 > div:nth-child(6) {
094     right:10px;
095     bottom:9px;
096     /* css3 transform - rotate */
097     -webkit-transform:rotate(135deg);
098     -moz-transform:rotate(135deg);
099     -o-transform:rotate(135deg);
100     /* css3 animation */
101     -webkit-animation-delay:1.04s;
102     -moz-animation-delay:1.04s;
103     -o-animation-delay:1.04s;
104 }
105 .loading1 > div:nth-child(7) {
106     bottom:0;
107     left:34px;
108     /* css3 transform - rotate */
109     -webkit-transform:rotate(180deg);
110     -moz-transform:rotate(180deg);
111     -o-transform:rotate(180deg);
112     /* css3 animation */
113     -webkit-animation-delay:1.17s;
114     -moz-animation-delay:1.17s;
115     -o-animation-delay:1.17s;
116 }
117 .loading1 > div:nth-child(8) {
118     left:10px;
119     bottom:9px;
120     /* css3 transform - rotate */
121     -webkit-transform:rotate(-135deg);
122     -moz-transform:rotate(-135deg);
123     -o-transform:rotate(-135deg);
124     /* css3 animation */
125     -webkit-animation-delay:1.3s;
126     -moz-animation-delay:1.3s;
127     -o-animation-delay:1.3s;
128 }
129 /* css3 keyframes - loading1 */
130 @-webkit-keyframes loading1 {
131     0%{ background-color:#000000 }
132     100%{ background-color:#FFFFFF }
133 }
134 @-moz-keyframes loading1 {
135     0%{ background-color:#000000 }
136     100%{ background-color:#FFFFFF }
137 }
138 @-o-keyframes loading1 {
139     0%{ background-color:#000000 }
140     100%{ background-color:#FFFFFF }
141 }

As you can see – I used CSS3 animation with keyframes, each step (point) is separated with delay with each other. Now, please review styles of our second ‘loading’ element:

001 .loading2 {
002     height:140px;
003     position:relative;
004     width:140px;
005     /* css3 transform - scale */
006     -webkit-transform:scale(0.6);
007     -moz-transform:scale(0.6);
008     -o-transform:scale(0.6);
009 }
010 .loading2 > div {
011     background-color:#FFFFFF;
012     height:25px;
013     position:absolute;
014     width:25px;
015     /* css3 radius */
016     -moz-border-radius:15px;
017     -webkit-border-radius:15px;
018     border-radius:15px;
019     /* css3 animation */
020     -webkit-animation-name:loading2;
021     -webkit-animation-duration:1.04s;
022     -webkit-animation-iteration-count:infinite;
023     -webkit-animation-direction:linear;
024     -moz-animation-name:loading2;
025     -moz-animation-duration:1.04s;
026     -moz-animation-iteration-count:infinite;
027     -moz-animation-direction:linear;
028     -o-animation-name:loading2;
029     -o-animation-duration:1.04s;
030     -o-animation-iteration-count:infinite;
031     -o-animation-direction:linear;
032 }
033 .loading2 > div:nth-child(1) {
034     left:0;
035     top:57px;
036     /* css3 animation */
037     -webkit-animation-delay:0.39s;
038     -moz-animation-delay:0.39s;
039     -o-animation-delay:0.39s;
040 }
041 .loading2 > div:nth-child(2) {
042     left:17px;
043     top:17px;
044     /* css3 animation */
045     -webkit-animation-delay:0.52s;
046     -moz-animation-delay:0.52s;
047     -o-animation-delay:0.52s;
048 }
049 .loading2 > div:nth-child(3) {
050     left:57px;
051     top:0;
052     /* css3 animation */
053     -webkit-animation-delay:0.65s;
054     -moz-animation-delay:0.65s;
055     -o-animation-delay:0.65s;
056 }
057 .loading2 > div:nth-child(4) {
058     right:17px;
059     top:17px;
060     /* css3 animation */
061     -webkit-animation-delay:0.78s;
062     -moz-animation-delay:0.78s;
063     -o-animation-delay:0.78s;
064 }
065 .loading2 > div:nth-child(5) {
066     right:0;
067     top:57px;
068     /* css3 animation */
069     -webkit-animation-delay:0.91s;
070     -moz-animation-delay:0.91s;
071     -o-animation-delay:0.91s;
072 }
073 .loading2 > div:nth-child(6) {
074     right:17px;
075     bottom:17px;
076     /* css3 animation */
077     -webkit-animation-delay:1.04s;
078     -moz-animation-delay:1.04s;
079     -o-animation-delay:1.04s;
080 }
081 .loading2 > div:nth-child(7) {
082     left:57px;
083     bottom:0;
084     /* css3 animation */
085     -webkit-animation-delay:1.17s;
086     -moz-animation-delay:1.17s;
087     -o-animation-delay:1.17s;
088 }
089 .loading2 > div:nth-child(8) {
090     left:17px;
091     bottom:17px;
092     /* css3 animation */
093     -webkit-animation-delay:1.3s;
094     -moz-animation-delay:1.3s;
095     -o-animation-delay:1.3s;
096 }
097 /* css3 keyframes - loading2 */
098 @-webkit-keyframes loading2 {
099     0%{ background-color:#000000 }
100     100%{ background-color:#FFFFFF }
101 }
102 @-moz-keyframes loading2 {
103     0%{ background-color:#000000 }
104     100%{ background-color:#FFFFFF }
105 }
106 @-o-keyframes loading2 {
107     0%{ background-color:#000000 }
108     100%{ background-color:#FFFFFF }
109 }

I used here the same idea as for the first element, but, with slightly changed styles. And finally – our third ‘loading’ element:

01 .loading3 > div {
02     background-color:#FFFFFF;
03     border:1px solid #000000;
04     float:left;
05     height:114px;
06     margin-left:5px;
07     width:30px;
08     opacity:0.1;
09     /* css3 transform - scale */
10     -webkit-transform:scale(0.8);
11     -moz-transform:scale(0.8);
12     -o-transform:scale(0.8);
13     /* css3 animation */
14     -webkit-animation-name:loading3;
15     -webkit-animation-duration:1.2s;
16     -webkit-animation-iteration-count:infinite;
17     -webkit-animation-direction:linear;
18     -moz-animation-name:loading3;
19     -moz-animation-duration:1.2s;
20     -moz-animation-iteration-count:infinite;
21     -moz-animation-direction:linear;
22     -o-animation-name:loading3;
23     -o-animation-duration:1.2s;
24     -o-animation-iteration-count:infinite;
25     -o-animation-direction:linear;
26 }
27 .loading3 > div:nth-child(1) {
28     /* css3 animation */
29     -webkit-animation-delay:0.24s;
30     -moz-animation-delay:0.24s;
31     -o-animation-delay:0.24s;
32 }
33 .loading3 > div:nth-child(2) {
34     /* css3 animation */
35     -webkit-animation-delay:0.48s;
36     -moz-animation-delay:0.48s;
37     -o-animation-delay:0.48s;
38 }
39 .loading3 > div:nth-child(3) {
40     /* css3 animation */
41     -webkit-animation-delay:0.72s;
42     -moz-animation-delay:0.72s;
43     -o-animation-delay:0.72s;
44 }
45 .loading3 > div:nth-child(4) {
46     /* css3 animation */
47     -webkit-animation-delay:0.96s;
48     -moz-animation-delay:0.96s;
49     -o-animation-delay:0.96s;
50 }
51 .loading3 > div:nth-child(5) {
52     /* css3 animation */
53     -webkit-animation-delay:1.2s;
54     -moz-animation-delay:1.2s;
55     -o-animation-delay:1.2s;
56 }
57 /* css3 keyframes - loading3 */
58 @-webkit-keyframes loading3 {
59     0% {
60         -webkit-transform:scale(1.2);
61         opacity:1;
62     }
63     100% {
64         -webkit-transform:scale(0.7);
65         opacity:0.1;
66     }
67 }
68 @-moz-keyframes loading3 {
69     0% {
70         -moz-transform:scale(1.2);
71         opacity:1;
72     }
73     100% {
74         -moz-transform:scale(0.7);
75         opacity:0.1;
76     }
77 }
78 @-o-keyframes loading3 {
79     0% {
80         -o-transform:scale(1.2);
81         opacity:1;
82     }
83     100% {
84         -o-transform:scale(0.7);
85         opacity:0.1;
86     }
87 }
Live Demo
download result

Conclusion

That is all for today. We have just created three different ‘loading’ elements. I hope that everything have been easy for you and you like result. Good luck!