Ajax Loader
HTML 
<div id="stumbleupon-logo">
1
<div id="stumbleupon-logo">
2
<div id="stumbleupon-logo-text">
3
<div id="stumbleupon-logo-top">
4
<div id="stumbleupon-logo-top-in"></div>
5
</div>
6
<div id="stumbleupon-logo-midrift">
7
<div id="stumbleupon-logo-mid-s"></div>
8
<div id="stumbleupon-logo-mid-u">
9
<div id="stumbleupon-logo-mid-utop"></div>
10
<div id="stumbleupon-logo-mid-ubottom"></div>
11
</div>
12
</div>
13
<div id="stumbleupon-logo-bottom">
14
<div id="stumbleupon-logo-bottom-s">
15
<div class="stumbleupon-logo-bottom-in"></div>
16
</div>
17
<div id="stumbleupon-logo-bottom-u">
18
<div class="stumbleupon-logo-bottom-in"></div>
19
</div>
20
</div>
21
</div>
22
</div>
 
CSS 
#stumbleupon-logo {
1
#stumbleupon-logo {
2
    height: 300px;
3
    width: 300px;
4
    border: 1px solid #eb4823;
5
    -webkit-border-radius: 150px;
6
    -moz-border-radius: 150px;
7
    border-radius: 150px;
8
    background: #eb4823;
9
    margin: 0 auto;
10
}
11
 
12
#stumbleupon-logo-top {
13
    height: 20px;
14
    margin-top: 83px;
15
    width: 77px;
16
    background: white;
17
    padding-top: 29px;
18
    margin-left: 111px;
19
    -webkit-border-top-right-radius: 40px;
20
    -webkit-border-top-left-radius: 40px;
21
    -moz-border-radius-topright: 40px;
22
    -moz-border-radius-topleft: 40px;
23
    border-top-right-radius: 40px;
24
    border-top-left-radius: 40px;
25
}
26
 
27
#stumbleupon-logo-top-in {
28
    height: 60px;
29
    width: 16px;
30
    position: relative;
31
    background: #eb4823;
32
    margin-left: auto;
33
    margin-right: auto;
34
    -webkit-border-top-right-radius: 40px;
35
    -webkit-border-top-left-radius: 40px;
36
    -moz-border-radius-topright: 40px;
37
    -moz-border-radius-topleft: 40px;
38
    border-top-right-radius: 40px;
39
    border-top-left-radius: 40px;
40
}
41
 
42
.stumbleupon-logo-bottom-in {
43
    height: 33px;
44
    width: 16px;
45
    position: relative;
46
    background: #eb4823;
47
    margin-left: auto;
48
    margin-right: auto;
49
    -webkit-border-bottom-right-radius: 40px;
50
    -webkit-border-bottom-left-radius: 40px;
51
    -moz-border-radius-bottomright: 40px;
52
    -moz-border-radius-bottomleft: 40px;
53
    border-bottom-right-radius: 40px;
54
    border-bottom-left-radius: 40px;
55
}
56
 
57
#stumbleupon-logo-bottom-s {
58
    height: 60px;
59
    width: 76px;
60
    background: white;
61
    float: left;
62
    margin-left: 65px;
63
    -webkit-border-bottom-right-radius: 40px;
64
    -webkit-border-bottom-left-radius: 40px;
65
    -moz-border-radius-bottomright: 40px;
66
    -moz-border-radius-bottomleft: 40px;
67
    border-bottom-right-radius: 40px;
68
    border-bottom-left-radius: 40px;
69
}
70
 
71
#stumbleupon-logo-bottom-u {
72
    height: 60px;
73
    width: 76px;
74
    margin-top: -6px;
75
    background: white;
76
    float: right;
77
    margin-right: 66px;
78
    -webkit-border-bottom-right-radius: 40px;
79
    -webkit-border-bottom-left-radius: 40px;
80
    -moz-border-radius-bottomright: 40px;
81
    -moz-border-radius-bottomleft: 40px;
82
    border-bottom-right-radius: 40px;
83
    border-bottom-left-radius: 40px;
84
}
85
 
86
#stumbleupon-logo-mid-s {
87
    height: 20px;
88
    width: 30px;
89
    background: white;
90
    float: left;
91
    margin-left: 111px;
92
}
93
 
94
#stumbleupon-logo-mid-u {
95
    margin-right: 112px;
96
    float: right;
97
    width: 30px;
98
    position: relative;
99
}
100
 
101
#stumbleupon-logo-mid-utop {
102
    border-top: 6px solid white;
103
    border-left: 11px solid transparent;
104
    border-right: 18px solid transparent;
105
    margin-bottom: 14px;
106
}
107
 
108
#stumbleupon-logo-mid-ubottom {
109
    border-top: 6px solid #eb4823;
110
    border-left: 11px solid transparent;
111
    border-right: 18px solid transparent;
112
}
113
 
114
#stumbleupon-logo-midrift { height: 20px }
115
 
116
#stumbleupon-logo {
117
    height: 300px;
118
    width: 300px;
119
    border: 1px solid #eb4823;
120
    -webkit-border-radius: 150px;
121
    -moz-border-radius: 150px;
122
    border-radius: 150px;
123
    background: #eb4823;
124
    margin: 0 auto;
125
}
126
 
127
#stumbleupon-logo-top {
128
    height: 20px;
129
    margin-top: 83px;
130
    width: 77px;
131
    background: white;
132
    padding-top: 29px;
133
    margin-left: 111px;
134
    -webkit-border-top-right-radius: 40px;
135
    -webkit-border-top-left-radius: 40px;
136
    -moz-border-radius-topright: 40px;
137
    -moz-border-radius-topleft: 40px;
138
    border-top-right-radius: 40px;
139
    border-top-left-radius: 40px;
140
}
141
 
142
#stumbleupon-logo-top-in {
143
    height: 60px;
144
    width: 16px;
145
    position: relative;
146
    background: #eb4823;
147
    margin-left: auto;
148
    margin-right: auto;
149
    -webkit-border-top-right-radius: 40px;
150
    -webkit-border-top-left-radius: 40px;
151
    -moz-border-radius-topright: 40px;
152
    -moz-border-radius-topleft: 40px;
153
    border-top-right-radius: 40px;
154
    border-top-left-radius: 40px;
155
}
156
 
157
.stumbleupon-logo-bottom-in {
158
    height: 33px;
159
    width: 16px;
160
    position: relative;
161
    background: #eb4823;
162
    margin-left: auto;
163
    margin-right: auto;
164
    -webkit-border-bottom-right-radius: 40px;
165
    -webkit-border-bottom-left-radius: 40px;
166
    -moz-border-radius-bottomright: 40px;
167
    -moz-border-radius-bottomleft: 40px;
168
    border-bottom-right-radius: 40px;
169
    border-bottom-left-radius: 40px;
170
}
171
 
172
#stumbleupon-logo-bottom-s {
173
    height: 60px;
174
    width: 76px;
175
    background: white;
176
    float: left;
177
    margin-left: 65px;
178
    -webkit-border-bottom-right-radius: 40px;
179
    -webkit-border-bottom-left-radius: 40px;
180
    -moz-border-radius-bottomright: 40px;
181
    -moz-border-radius-bottomleft: 40px;
182
    border-bottom-right-radius: 40px;
183
    border-bottom-left-radius: 40px;
184
}
185
 
186
#stumbleupon-logo-bottom-u {
187
    height: 60px;
188
    width: 76px;
189
    margin-top: -6px;
190
    background: white;
191
    float: right;
192
    margin-right: 66px;
193
    -webkit-border-bottom-right-radius: 40px;
194
    -webkit-border-bottom-left-radius: 40px;
195
    -moz-border-radius-bottomright: 40px;
196
    -moz-border-radius-bottomleft: 40px;
197
    border-bottom-right-radius: 40px;
198
    border-bottom-left-radius: 40px;
199
}
200
 
201
#stumbleupon-logo-mid-s {
202
    height: 20px;
203
    width: 30px;
204
    background: white;
205
    float: left;
206
    margin-left: 111px;
207
}
208
 
209
#stumbleupon-logo-mid-u {
210
    margin-right: 112px;
211
    float: right;
212
    width: 30px;
213
    position: relative;
214
}
215
 
216
#stumbleupon-logo-mid-utop {
217
    border-top: 6px solid white;
218
    border-left: 11px solid transparent;
219
    border-right: 18px solid transparent;
220
    margin-bottom: 14px;
221
}
222
 
223
#stumbleupon-logo-mid-ubottom {
224
    border-top: 6px solid #eb4823;
225
    border-left: 11px solid transparent;
226
    border-right: 18px solid transparent;
227
}
228
 
229
#stumbleupon-logo-midrift { height: 20px }
 

CSS3 StumbleUpon Logo

CSSDeck G+