Ajax Loader
×
HTML 
<i class="letter v"></i>
1
<i class="letter v"></i>
2
<i class="letter i"></i>
3
<i class="letter c"></i>
4
<i class="letter t"></i>
5
<i class="letter o"></i>
6
<i class="letter r"></i>
 
CSS 
body {
1
body {
2
    background-color: #fffddd;
3
    font-size: 125%; /* Change size here */
4
    padding: 3em;
5
}
6
 
7
/* Global Letter Styling */
8
 
9
.letter {
10
    border-color: #556 !important; /* Change colour here */
11
    border-style: solid;
12
    border-width: .5em;
13
    display: inline-block;
14
    position: relative;
15
}
16
.letter:after {
17
    border-color: inherit;
18
    border-style: solid;
19
    border-width: .5em;
20
    content: '';
21
    position: absolute;
22
}
23
 
24
/* Individual Letter Styling */
25
 
26
.a {
27
    border-bottom: none;
28
    border-radius: 1em 1em 0 0;
29
    height: 2.05em;
30
    margin-top: -.05em;
31
    width: 1em;
32
}
33
.a:after {
34
    border-bottom: none;
35
    border-left: none;
36
    border-right: none;
37
    left: 0;
38
    right: 0;
39
    top: .75em;
40
}
41
.b {
42
    border-radius: 0 1em 1em 0;
43
    height: .5em;
44
    width: 1em;
45
}
46
.b:after {
47
    border-radius: 0 1em 1em 0;
48
    bottom: 100%;
49
    height: .5em;
50
    left: -.5em;
51
    width: .9em;  
52
}
53
.c {
54
    border-right: none;
55
    border-radius: 1em 0 0 1em;
56
    height: 1.5em;
57
    width: 1.5em;
58
}
59
.c:after {
60
    border-bottom: none;
61
    border-left: none;
62
    border-top: none;
63
    height: .5em;
64
    right: 0;
65
    top: 0;
66
    width: .5em;
67
}
68
.d {
69
    border-radius: 0 1em 1em 0;
70
    height: 1.5em;
71
    width: 1em;
72
}
73
.d:after {
74
    border: none;
75
}
76
.e {
77
    border-right: none;
78
    height: 1.5em;
79
    width: 1.5em;
80
}
81
.e:after {
82
    border-bottom: none;
83
    left: 0;
84
    right: .5em;
85
    top: .5em;
86
}
87
.f {
88
    border-bottom: none;
89
    border-right: none;
90
    height: 2em;
91
    width: 1.5em;
92
}
93
.f:after {
94
    border-bottom: none;
95
    left: 0;
96
    right: .5em;
97
    top: .5em;
98
}
99
.g {
100
    border-right: none;
101
    border-radius: 1em 0 0 1em;
102
    height: 1.5em;
103
    width: 1.5em;
104
}
105
.g:after {
106
    border-bottom: none;
107
    border-left: none;
108
    border-top: none;
109
    bottom: 0;
110
    height: .5em;
111
    right: 0;
112
    width: .5em;
113
}
114
.h {
115
    border-bottom: none;
116
    border-top: none;
117
    height: 2.5em;
118
    width: 1em;
119
}
120
.h:after {
121
    border-bottom: none;
122
    left: 0;
123
    right: 0;
124
    top: 1em;
125
}
126
.i {
127
    border-left: none;
128
    border-right: none;
129
    height: 1.5em;
130
    width: 1.5em;
131
}
132
.i:after {
133
    border-bottom: none;
134
    border-left: none;
135
    border-top: none;
136
    bottom: 0;
137
    left: .5em;
138
    top: 0;
139
    width: 0;
140
}
141
.j {
142
    border-left: none;
143
    border-top: none;
144
    border-radius: 0 0 1em 0;
145
    height: 2em;
146
    width: 1.5em;
147
}
148
.j:after {
149
    border-bottom: none;
150
    border-right: none;
151
    border-top: none;
152
    bottom: 0;
153
    height: .5em;
154
    left: 0;
155
    width: .5em;
156
}
157
.k {
158
    border-bottom: 0;
159
    border-radius: 0 1em 0 0;
160
    height: 1em;
161
    width: 1em;
162
}
163
.k:after {
164
    border-top: none;
165
    border-radius: 0 0 1em 0;
166
    bottom: 100%;
167
    height: 1em;
168
    left: -.5em;
169
    width: .9em;  
170
}
171
.l {
172
    border-right: none;
173
    border-top: none;
174
    height: 2em;
175
    width: 1.5em;
176
}
177
.l:after {
178
    border: none;
179
}
180
.m {
181
    border-bottom: none;
182
    border-radius: 1em 1em 0 0;
183
    height: 2.05em;
184
    margin-right: 1.25em;
185
    margin-top: -.05em;
186
    width: .75em;
187
}
188
.m:after {
189
    border-bottom: none;
190
    border-radius: 1em 1em 0 0;
191
    height: 2.05em;
192
    left: .75em;
193
    top: -.5em;
194
    width: .75em;
195
}
196
.n {
197
    border-bottom: none;
198
    border-radius: 0 1em 0 0;
199
    height: 2em;
200
    width: 1em;
201
}
202
.n:after {
203
    border: none;
204
}
205
.o {
206
    border-radius: 1.5em ;
207
    height: 1.6em;
208
    margin-bottom: -.05em;
209
    margin-top: -.05em;
210
    width: 1.25em;
211
}
212
.o:after {
213
    border: none;
214
}
215
.p {
216
    border-bottom: none;
217
    border-right: none;
218
    border-top: none;
219
    height: 1em;
220
    width: 1.5em;
221
}
222
.p:after {
223
    border-radius: 0 1em 1em 0;
224
    bottom: 100%;
225
    height: .5em;
226
    left: -.5em;
227
    width: 1em;  
228
}
229
.q {
230
    border-radius: 1.5em 1.5em 0 1.5em ;
231
    height: 1.55em;
232
    margin-top: -.05em;
233
    width: 1.25em;
234
}
235
.q:after {
236
    border-radius: 1.5em 0 0 0;
237
    bottom: -.5em;
238
    right: -.5em;
239
}
240
.r {
241
    border-bottom: none;
242
    border-radius: 0 1em 0 0;
243
    height: 1em;
244
    width: 1em;
245
}
246
.r:after {
247
    border-radius: 0 1em 1em 0;
248
    bottom: 100%;
249
    height: .5em;
250
    left: -.5em;
251
    width: 1em;  
252
}
253
.s {
254
    border-left: none;
255
    border-top: none;
256
    border-radius: 1em .5em 1em 0;
257
    height: 1em;
258
    margin-right: -.05em;
259
    width: 1.5em;
260
}
261
.s:after {
262
    border-bottom: none;
263
    border-right: none;
264
    border-radius: 1em 0 1em .5em;
265
    height: 1em;
266
    right: -.4em;
267
    top: -1em;
268
    width: 1.4em;
269
}
270
.s:before {
271
    border-color: inherit;
272
    border-style: solid;
273
    border-width: .5em;
274
    border-bottom: none;
275
    border-left: none;
276
    border-right: none;
277
    content: '';
278
    height: 0;
279
    left: .5em;
280
    position: absolute;
281
    width: 1em;
282
}
283
.t {
284
    border-bottom: none;
285
    border-left: none;
286
    border-right: none;
287
    height: 2em;
288
    width: 2em;
289
}
290
.t:after {
291
    border-bottom: none;
292
    border-left: none;
293
    border-top: none;
294
    bottom: 0;
295
    left: .75em;
296
    top: 0;
297
    width: 0;
298
}
299
.u {
300
    border-top: none;
301
    border-radius: 0 0 1em 1em;
302
    height: 2.05em;
303
    margin-bottom: -.05em;
304
    width: 1em;
305
}
306
.u:after {
307
    border: none;
308
}
309
.v {
310
    border-top: none;
311
    border-radius: 0 0 1em 0;
312
    width: 1em;
313
    height: 2em;
314
}
315
.v:after {
316
    border: none;
317
}
318
.w {
319
    border-top: none;
320
    border-radius: 0 0 1em 1em;
321
    height: 2.05em;
322
    margin-bottom: -.05em;
323
    margin-right: 1.25em;
324
    width: .75em;
325
}
326
.w:after {
327
    border-top: none;
328
    border-radius: 0 0 1em 1em;
329
    height: 2.05em;
330
    left: .75em;
331
    top: 0em;
332
    width: .75em;
333
}
334
.x {
335
    border-bottom: none;
336
    border-radius: 1em 1em 0 0;
337
    height: 1em;
338
    width: 1em;
339
}
340
.x:after {
341
    border-top: none;
342
    border-radius: 0 0 1em 1em;
343
    height: 1em;
344
    left: -.5em;
345
    top: -1.5em;
346
    width: 1em;
347
}
348
.y {
349
    border-top: none;
350
    border-radius: 0 0 1em 1em;
351
    height: 1em;
352
    margin-bottom: 1em;
353
    width: 1em;
354
}
355
.y:after {
356
    border-bottom: none;
357
    border-left: none;
358
    border-top: none;
359
    bottom: -1.5em;
360
    left: .25em;
361
    top: 1em;
362
    width: 0;
363
}
364
.z {
365
    border-left: none;
366
    border-right: none;
367
    height: 1.5em;
368
    width: 2em;
369
}
370
.z:after {
371
    border-bottom: none;
372
    border-right: none;
373
    border-top: none;
374
    height: 2.5em;
375
    left: .75em;
376
    top: -.5em;
377
    transform: rotate(41.5deg);
378
    width: 0;
379
}
 

Untitled

CSSDeck G+