Home » Tutorials

CSS3 Loading elements – part 2

Tutorials
Author Reading 10 min Views 716 Published by Modified by

We received a lot of feedback on this article CSS3 Loading elements, so we decided to prepare the second part of this article. Where we will create 4 new loading elements. All of them use pure CSS3 animation and don’t use images. Let’s review them.

Contents
  1. Step 1. HTML
  2. Step 2. CSS
  3. Conclusion
Live Demo

So, lets start

Step 1. HTML

You can see here four elements – our new ‘loading’ elements. Every of them have a very easy structure.

01 <div class="main_body">
02     <div class="element">
03         <div class="loading1">
04         </div>
05     </div>
06     <div class="element">
07         <div class="loading2">
08             <div></div>
09         </div>
10     </div>
11     <div class="element">
12         <div class="loading3">
13             <div>loading..</div>
14             <div></div>
15             <div></div>
16         </div>
17     </div>
18     <div class="element">
19         <div class="loading4">
20         </div>
21     </div>
22 </div>

Step 2. CSS

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

01 .loading1 {
02     background-color: #000;
03     width: 90px;
04     height: 90px;
05     border: 30px solid #FFF;
06     border-right-width: 0;
07     border-radius: 50%;
08     box-shadow: 0 0 10px 5px #009933;
09     /* css3 animation */
10     -webkit-animation: anim1 1s linear infinite;
11     -moz-animation: anim1 1s linear infinite;
12     -ms-animation: anim1 1s linear infinite;
13     -o-animation: anim1 1s linear infinite;
14     animation: anim1 1s linear infinite;
15 }
16 /* css3 keyframes - animation 1 */
17 @-webkit-keyframes anim1 {
18     from { -webkit-transform: rotateX(45deg) rotateZ(0deg); }
19     50% { -webkit-transform: rotateX(0deg) rotateZ(180deg); }
20     to { -webkit-transform: rotateX(45deg) rotateZ(360deg); }
21 }
22 @-moz-keyframes anim1 {
23     from { -moz-transform: rotateX(45deg) rotateZ(0deg); }
24     50% { -moz-transform: rotateX(0deg) rotateZ(180deg); }
25     to { -moz-transform: rotateX(45deg) rotateZ(360deg); }
26 }
27 @-ms-keyframes anim1 {
28     from { -ms-transform: rotateX(45deg) rotateZ(0deg); }
29     50% { -ms-transform: rotateX(0deg) rotateZ(180deg); }
30     to { -ms-transform: rotateX(45deg) rotateZ(360deg); }
31 }
32 @-o-keyframes anim1 {
33     from { -o-transform: rotateX(45deg) rotateZ(0deg); }
34     50% { -o-transform: rotateX(0deg) rotateZ(180deg); }
35     to { -o-transform: rotateX(45deg) rotateZ(360deg); }
36 }
37 @keyframes anim1 {
38     from { transform: rotateX(45deg) rotateZ(0deg); }
39     50% { transform: rotateX(0deg) rotateZ(180deg); }
40     to { transform: rotateX(45deg) rotateZ(360deg); }
41 }

As you can see – we used CSS3 animation (with keyframes). This element looks like 3D button, all because of border-right-width: 0. This property emulates a push 3d button. Now, please review styles of our second ‘loading’ element:

01 .loading2 {
02     background-color: #009933;
03     border-radius: 2px;
04     height: 20px;
05     margin-top: 60px;
06     overflow: hidden;
07     position: relative;
08     width: 140px;
09 }
10 .loading2 > div {
11     background-color: #FFFFFF;
12     height: 100%;
13     width: 0;
14     /* css3 animation */
15     -webkit-animation-name:anim2;
16     -webkit-animation-duration:2.0s;
17     -webkit-animation-iteration-count:infinite;
18     -webkit-animation-direction:linear;
19     -webkit-animation-timing-function:ease;
20     -moz-animation-name:anim2;
21     -moz-animation-duration:2.0s;
22     -moz-animation-iteration-count:infinite;
23     -moz-animation-direction:linear;
24     -moz-animation-timing-function:ease;
25     -ms-animation-name:anim2;
26     -ms-animation-duration:2.0s;
27     -ms-animation-iteration-count:infinite;
28     -ms-animation-direction:linear;
29     -ms-animation-timing-function:ease;
30     -o-animation-name:anim2;
31     -o-animation-duration:2.0s;
32     -o-animation-iteration-count:infinite;
33     -o-animation-direction:linear;
34     -o-animation-timing-function:ease;
35     animation-name:anim2;
36     animation-duration:2.0s;
37     animation-iteration-count:infinite;
38     animation-direction:linear;
39     animation-timing-function:ease;
40 }
41 /* css3 keyframes - animation 2 */
42 @-webkit-keyframes anim2 {
43     from { width: 0; }
44     50% { width: 100%; }
45     to { width: 0; }
46 }
47 @-moz-keyframes anim2 {
48     from { width: 0; }
49     50% { width: 100%; }
50     to { width: 0; }
51 }
52 @-ms-keyframes anim2 {
53     from { width: 0; }
54     50% { width: 100%; }
55     to { width: 0; }
56 }
57 @-o-keyframes anim2 {
58     from { width: 0; }
59     50% { width: 100%; }
60     to { width: 0; }
61 }
62 @keyframes anim2 {
63     from { width: 0; }
64     50% { width: 100%; }
65     to { width: 0; }
66 }

This element uses css3 animation with keyframes too, and it looks like loading slider. The next one element:

01 .loading3 {
02     border-radius: 50%;
03     font-size: 20px;
04     height: 100px;
05     line-height: 90px;
06     position: relative;
07     text-align: center;
08     width: 100px;
09 }
10 .loading3 > div:nth-child(2), .loading3 > div:nth-child(3) {
11     background-color: rgba(255, 255, 255, 0.2);
12     border: 5px solid #FFF;
13     border-radius: 50%;
14     box-shadow: 0 0 5px 0 #009933;
15     height: 100px;
16     position: absolute;
17     top: 0px;
18     /* set top and bottom border widths to 0 */
19     border-top-width: 0;
20     border-bottom-width: 0;
21     /* css3 animation */
22     -webkit-animation: anim3 2s linear infinite;
23     -moz-animation: anim3 2s linear infinite;
24     -ms-animation: anim3 2s linear infinite;
25     -o-animation: anim3 2s linear infinite;
26     animation: anim3 2s linear infinite;
27 }
28 .loading3 > div:nth-child(2) {
29     border-color: #FFF;
30     left: 0px;
31     width: 90px;
32 }
33 .loading3 > div:nth-child(3) {
34     border-color: #009933;
35     left: -5px;
36     width: 100px;
37     /* css3 delay */
38     -webkit-animation-delay:0.5s;
39     -moz-animation-delay:0.5s;
40     -ms-animation-delay:0.5s;
41     -o-animation-delay:0.5s;
42     animation-delay:0.5s;
43 }
44 /* css3 keyframes - animation 3 */
45 @-webkit-keyframes anim3 {
46     from { -webkit-transform: rotateY(0deg); }
47     50% { -webkit-transform: rotateY(180deg); }
48     to { -webkit-transform: rotateY(360deg); }
49 }
50 @-moz-keyframes anim3 {
51     from { -moz-transform: rotateY(0deg); }
52     50% { -moz-transform: rotateY(180deg); }
53     to { -moz-transform: rotateY(360deg); }
54 }
55 @-ms-keyframes anim3 {
56     from { -ms-transform: rotateY(0deg); }
57     50% { -ms-transform: rotateY(180deg); }
58     to { -ms-transform: rotateY(360deg); }
59 }
60 @-o-keyframes anim3 {
61     from { -o-transform: rotateY(0deg); }
62     50% { -o-transform: rotateY(180deg); }
63     to { -o-transform: rotateY(360deg); }
64 }
65 @keyframes anim3 {
66     from { transform: rotateY(0deg); }
67     50% { transform: rotateY(180deg); }
68     to { transform: rotateY(360deg); }
69 }

This is more interesting element, it looks like two semi-transparent circles in space around the label ‘loading’. We should generate 2 different circles and rotate them in Y coordinate, also we should set delay for the second circle. The last one element:

01 .loading4 {
02     background: none repeat scroll 0 0 #EEEEEE;
03     border-color: #009933;
04     border-radius: 100%;
05     border-style: solid;
06     border-width: 2px 2px 50px;
07     height: 48px;
08     position: relative;
09     width: 96px;
10     /* css3 animation */
11     -webkit-animation: anim4 1s linear infinite;
12     -moz-animation: anim4 2s linear infinite;
13     -ms-animation: anim4 1s linear infinite;
14     -o-animation: anim4 1s linear infinite;
15     animation: anim4 1s linear infinite;
16 }
17 .loading4:before {
18     background: none repeat scroll 0 0 #EEEEEE;
19     border: 18px solid #009933;
20     border-radius: 100%;
21     content: "";
22     height: 12px;
23     left: 0;
24     position: absolute;
25     top: 50%;
26     width: 12px;
27 }
28 .loading4:after {
29     background: none repeat scroll 0 0 #009933;
30     border: 18px solid #EEEEEE;
31     border-radius: 100%;
32     content: "";
33     height: 12px;
34     left: 50%;
35     position: absolute;
36     top: 50%;
37     width: 12px;
38 }
39 /* css3 keyframes - animation 4 */
40 @-webkit-keyframes anim4 {
41     from { -webkit-transform: rotateZ(0deg); }
42     50% { -webkit-transform: rotateZ(180deg); }
43     to { -webkit-transform: rotateZ(360deg); }
44 }
45 @-moz-keyframes anim4 {
46     from { -moz-transform: rotateZ(0deg); }
47     50% { -moz-transform: rotateZ(180deg); }
48     to { -moz-transform: rotateZ(360deg); }
49 }
50 @-ms-keyframes anim4 {
51     from { -ms-transform: rotateZ(0deg); }
52     50% { -ms-transform: rotateZ(180deg); }
53     to { -ms-transform: rotateZ(360deg); }
54 }
55 @-o-keyframes anim4 {
56     from { -o-transform: rotateZ(0deg); }
57     50% { -o-transform: rotateZ(180deg); }
58     to { -o-transform: rotateZ(360deg); }
59 }
60 @keyframes anim4 {
61     from { transform: rotateZ(0deg); }
62     50% { transform: rotateZ(180deg); }
63     to { transform: rotateZ(360deg); }
64 }
Live Demo

[sociallocker]

download result

[/sociallocker]

Conclusion

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

Rate article
© 2026 Script Tutorials