Loading Effect Using CSS3

By | October 26, 2013

Loading effect using css3 tutorial is given below. Before css3, loading effect can be done only by Macromedia flash or GIF image. By using css3 animation property, we can do this effect easily

 

 

.box1- outer circle

.box – inner circle

How this works
  • .box1(outer circle) rotates slowly in anti clockwise direction
  • .box(inner circle) rotates fastly in clockwise direction

 

Loading Effect Using CSS3

Loading Effect Using CSS3

HTML Code
1
2
3
4
5
6
7
<div class="box1">
<div class="box">
</div>
</div>

 

CSS Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
.box
{
height: 50px;
width: 50px;
background-color: #ECECEC;
border: 5px solid #000;
border-bottom: 5px solid #FDFDFD;
border-radius: 100px;
margin: 9px auto;

-webkit-animation: load 1s infinite linear;
-moz-animation: load 1s infinite linear;
-ms-animation: load 1s infinite linear;
-o-animation: load 1s infinite linear;
animation: load 1s infinite linear;
}

@-ms-keyframes load {
from { -ms-transform:rotate(0deg);}
to {-ms-transform:rotate( 360deg);}
}
@-moz-keyframes load {
from { -moz-transform:rotate(0deg);}
to {-moz-transform:rotate( 360deg);}
}
@-webkit-keyframes load {
from { -webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}
}
@keyframes load {
from { transform:rotate(0deg);}
to { transform:rotate( 360deg);}
}
.box1
{
height: 80px;
width: 80px;
background-color: #ECECEC;
border: 5px solid #000;
border-right: 5px solid #FDFDFD;
border-radius: 200px;
-webkit-animation: load1 8s infinite linear;
-moz-animation: load1 8s infinite linear;
-ms-animation: load1 8s infinite linear;
-o-animation: load1 8s infinite linear;
animation: load1 8s infinite linear;
}

@-ms-keyframes load1 {
from { -ms-transform:rotate(360deg);}
to {-ms-transform:rotate( 0deg);}
}
@-moz-keyframes load1 {
from { -moz-transform:rotate(360deg);}
to {-moz-transform:rotate(0deg);}
}
@-webkit-keyframes load1 {
from { -webkit-transform:rotate(360deg);}
to {-webkit-transform:rotate(0deg);}
}
@keyframes load1 {
from { transform:rotate(360deg);}
to { transform:rotate(0deg);}
}

4 thoughts on “Loading Effect Using CSS3

Leave a Reply

Your email address will not be published. Required fields are marked *