Ajax Loader
HTML 
<!DOCTYPE html>
1
<!DOCTYPE html>
2
 
3
<html lang="en">
4
  <head>
5
    <meta charset="utf-8" />
6
    <title>UI Kit</title>
7
  </head>
8
  <body>
9
    <form>
10
      <input type="button" value="Button" />
11
      <input type="button" value="Disabled" disabled />
12
      <input type="button" value="This is a really long button" />
13
      <br />
14
      <div class="buttonset">
15
        <input type="button" value="First" />
16
        <input type="button" value="Second" />
17
        <input type="button" value="Third" />
18
      </div>
19
      <br />
20
      <input type="checkbox" />
21
      <input type="checkbox" checked />
22
      <input type="checkbox" disabled />
23
      <input type="checkbox" disabled checked />
24
      <input type="radio" name="demo" />
25
      <input type="radio" name="demo" checked />
26
      <input type="radio" disabled />
27
      <input type="radio" disabled checked />
28
      <input type="checkbox" class="switch" />
29
      <input type="checkbox" class="switch" checked />
30
      <input type="checkbox" class="switch" disabled />
31
      <input type="checkbox" class="switch" disabled checked />
32
      <br />
33
      <input type="range" />
34
      <input type="range" disabled />
35
      <br />
36
      <input type="text" value="This is a text input" />
37
      <input type="text" value="This one's disabled" disabled />
38
      <br />
39
      <textarea style="float:left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</textarea>
40
      <textarea style="float:left" disabled>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</textarea>
41
      <br style="clear:both" />
42
      <select>
43
        <option>Option #1</option>
44
        <option>Option #2</option>
45
        <option>Option #3</option>
46
      </select>
47
      <select disabled>
48
        <option>Option #1</option>
49
        <option selected>Disabled</option>
50
        <option>Option #3</option>
51
      </select>
52
      <!-- okay, maybe this isn'tthe most semantic thing ever, but oh well -->
53
      <div class="select">
54
        <input type="radio" name="select" value="Option #1" />
55
        <input type="radio" name="select" value="Option #2" checked />
56
        <input type="radio" name="select" value="Option #3" />
57
        <input type="radio" name="select" value="Option #4" />
58
        <input type="radio" name="select" value="Option #5" />
59
      </div>
60
    </form>
61
  </body>
62
</html>
 
CSS 
      html, body, div, span, object, iframe,
1
      html, body, div, span, object, iframe,
2
      h1, h2, h3, h4, h5, h6, p, blockquote, pre,
3
      abbr, address, cite, code,
4
      del, dfn, em, img, ins, kbd, q, samp,
5
      small, strong, sub, sup, var,
6
      b, i,
7
      dl, dt, dd, ol, ul, li,
8
      fieldset, form, label, legend,
9
      table, caption, tbody, tfoot, thead, tr, th, td,
10
      article, aside, canvas, details, figcaption, figure,
11
      footer, header, hgroup, menu, nav, section, summary,
12
      time, mark, audio, video {
13
          margin:0;
14
          padding:0;
15
          border:0;
16
          outline:0;
17
          font-size:100%;
18
          vertical-align:baseline;
19
          background:transparent;
20
      }
21
 
22
      body {
23
          line-height:1;
24
      }
25
 
26
      article,aside,details,figcaption,figure,
27
      footer,header,hgroup,menu,nav,section {
28
          display:block;
29
      }
30
 
31
      nav ul {
32
          list-style:none;
33
      }
34
 
35
      blockquote, q {
36
          quotes:none;
37
      }
38
 
39
      blockquote:before, blockquote:after,
40
      q:before, q:after {
41
          content:'';
42
          content:none;
43
      }
44
 
45
      a {
46
          margin:0;
47
          padding:0;
48
          font-size:100%;
49
          vertical-align:baseline;
50
          background:transparent;
51
      }
52
 
53
      /* change colours to suit your needs */
54
      ins {
55
          background-color:#ff9;
56
          color:#000;
57
          text-decoration:none;
58
      }
59
 
60
      /* change colours to suit your needs */
61
      mark {
62
          background-color:#ff9;
63
          color:#000;
64
          font-style:italic;
65
          font-weight:bold;
66
      }
67
 
68
      del {
69
          text-decoration: line-through;
70
      }
71
 
72
      abbr[title], dfn[title] {
73
          border-bottom:1px dotted;
74
          cursor:help;
75
      }
76
 
77
      table {
78
          border-collapse:collapse;
79
          border-spacing:0;
80
      }
81
 
82
      /* change border colour to suit your needs */
83
      hr {
84
          display:block;
85
          height:1px;
86
          border:0;  
87
          border-top:1px solid #cccccc;
88
          margin:1em 0;
89
          padding:0;
90
      }
91
 
92
      input, select {
93
          vertical-align:middle;
94
      }
95
      body {
96
        background: #e3e3e3;
97
        padding: 20px;
98
      }
99
      input[type=button], input[type=submit], button {
100
        border: 1px solid #aaaaaa;
101
        min-width: 100px;
102
        border-radius: 3px;
103
        padding: 5px;
104
        background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dddddd));
105
        background: -webkit-linear-gradient(top, #ffffff, #dddddd);
106
        font-family: Helvetica, sans-serif;
107
        font-size: 13px;
108
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5),
109
                            inset 0 0 10px rgba(0,0,0,0.1);
110
        text-shadow: 0 1px 0 white;
111
        vertical-align: middle;
112
        color: #404040;
113
        cursor: pointer;
114
      }
115
      input[type=button]:hover, input[type=submit]:hover, button:hover {
116
        background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#d8d8d8));
117
        background: -webkit-linear-gradient(top, #f8f8f8, #d8d8d8);
118
        border-color: #a8a8a8;
119
      }
120
      input[type=button]:focus, input[type=submit]:focus, button:focus {
121
        outline: 0;
122
        -webkit-box-shadow: 0 0 4px rgba(27, 155, 224, 0.9),
123
                            inset 0 0 10px rgba(0,0,0,0.15),
124
                            0 1px 0 rgba(255, 255, 255, 0.5);
125
        -webkit-background-clip: padding-box;
126
      }
127
      input[type=button]:active, input[type=submit]:active, button:active, input[type=checkbox]:active {
128
        background: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#ffffff))!important;
129
        background: -webkit-linear-gradient(top, #dddddd, #ffffff);
130
        border-color: #aaaaaa;
131
        position: relative;
132
        top: 1px;
133
        -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
134
      }
135
      input[type=button]:disabled, input[type=submit]:disabled, button:disabled {
136
        opacity: 0.6;
137
        background: #eeeeee;
138
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
139
        cursor: default;
140
        text-shadow: none;
141
      }
142
      input[type=checkbox]:active {
143
        top: 0;
144
      }
145
      input[type=checkbox], input[type=radio] {
146
        -webkit-appearance: none;
147
        height: 15px;
148
        width: 15px;
149
        background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dddddd));
150
        background: -webkit-linear-gradient(top, #ffffff, #dddddd);
151
        vertical-align: middle;
152
        border: 1px solid #aaaaaa;
153
        border-radius: 3px;
154
        text-align: center;
155
        padding: 0!important;
156
        cursor: pointer;
157
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5),
158
                            inset 0 0 3px rgba(0,0,0,0.1);
159
      }
160
      input[type=checkbox]:focus, input[type=radio]:focus {
161
        outline: 0;
162
        -webkit-box-shadow: 0 0 4px rgba(27, 155, 224, 0.9),
163
                            inset 0 0 10px rgba(0,0,0,0.15),
164
                            0 1px 0 rgba(255, 255, 255, 0.5);
165
        -webkit-background-clip: padding-box;
166
      }
167
      input[type=checkbox]:hover, input[type=radio]:hover {
168
        background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#d8d8d8));
169
        background: -webkit-linear-gradient(top, #f8f8f8, #d8d8d8);
170
        border-color: #a8a8a8;
171
      }
172
      input[type=checkbox]:checked::after, input[type=radio]:checked::after {
173
        content: "✓";
174
        line-height: 10px;
175
        font-family: Arial, sans-serif!important;
176
        font-size: 13px;
177
        margin-left: 1px;
178
        color: #404040;
179
        text-shadow: 0 1px 0 white;
180
      }
181
      input[type=checkbox]:disabled, input[type=radio]:disabled {
182
        opacity: 0.6;
183
        background: #eeeeee;
184
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
185
        cursor: default;
186
      }
187
      input[type=radio] {
188
        border-radius: 8.5px;
189
      }
190
      input[type=radio]:checked::after {
191
        content: "•";
192
        font-size: 14px;
193
        position: relative;
194
        top: 1px;
195
      }
196
      input[type="text"], textarea, input[type=email], input[type=password], input[type=url], input[type=date], input[type=time] {
197
        min-width: 150px;
198
        border: 1px solid #aaaaaa;
199
        border-radius: 3px;
200
        padding: 5px;
201
        background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#ffffff));
202
        background: -webkit-linear-gradient(top, #eeeeee, #ffffff);
203
        font-family: Helvetica, sans-serif;
204
        font-size: 13px;
205
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5),
206
                            inset 0 0 10px rgba(0,0,0,0.15);
207
        vertical-align: middle;
208
      }
209
      input[type=text]:focus, textarea:focus, input[type=email]:focus, input[type=password]:focus, input[type=url]:focus, input[type=date]:focus, input[type=time]:focus {
210
        outline: 0;
211
        -webkit-box-shadow: 0 0 4px rgba(27, 155, 224, 0.9),
212
                            inset 0 0 10px rgba(0,0,0,0.15),
213
                            0 1px 0 rgba(255, 255, 255, 0.5);
214
        -webkit-background-clip: padding-box;
215
      }
216
      input[type=text]:disabled, textarea:disabled, input[type=email]:disabled, input[type=password]:disabled, input[type=url]:disabled, input[type=date]:disabled, input[type=time]:disabled {
217
        background: #e8e8e8;
218
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
219
        opacity: 0.6;
220
      }
221
      textarea {
222
        display: block;
223
        overflow: auto;
224
        height: 150px;
225
        width: 200px;
226
        margin: 2px;
227
      }
228
      input[type=range] {
229
        -webkit-appearance: none;
230
        height: 3px;
231
        width: 150px;
232
        border: 1px solid #aaaaaa;
233
        background: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#ffffff));
234
        background: -webkit-linear-gradient(top, #dddddd, #ffffff);
235
        border-radius: 3.5px;
236
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5),
237
                            inset 0 0 1px rgba(0,0,0,0.1);
238
        vertical-align: middle;
239
        margin: 5px 2px;
240
        cursor: pointer;
241
      }
242
      input[type=range]::-webkit-slider-thumb {
243
        -webkit-appearance: none;
244
        height: 15px;
245
        width: 15px;
246
        border: 1px solid #aaaaaa;
247
        border-radius: 8.5px;
248
        background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dddddd));
249
        background: -webkit-linear-gradient(top, #ffffff, #dddddd);
250
        -webkit-background-clip: content-box;
251
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5),
252
                            inset 0 0 3px rgba(0,0,0,0.1);
253
      }
254
      input[type=range]:hover::-webkit-slider-thumb {
255
        background: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#d4d4d4));
256
        background: -webkit-linear-gradient(top, #f8f8f8, #d8d8d8);
257
      }
258
      input[type=range]:disabled {
259
        background: #eeeeee;
260
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
261
        opacity: 0.6;
262
        cursor: default;
263
      }
264
      input[type=range]:disabled::-webkit-slider-thumb {
265
        background: #eeeeee;
266
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
267
      }
268
      .buttonset input[type=button], .buttonset input[type=submit], .buttonset button {
269
        margin: 0 -5px 0 0;
270
        border-radius: 0;
271
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25),
272
                            inset 0 0 10px rgba(0,0,0,0.1);
273
      }
274
      .buttonset input[type=button]:first-child, .buttonset input[type=submit]:first-child, .buttonset button:first-child {
275
        border-radius: 3px 0 0 3px;
276
      }
277
      .buttonset input[type=button]:last-child, .buttonset input[type=submit]:last-child, .buttonset button:last-child {
278
        border-radius: 0 3px 3px 0;
279
      }
280
      .buttonset input[type=button]:active, .buttonset input[type=submit]:active, .buttonset button:active {
281
        top: 0;
282
        z-index: 1;
283
      }
284
      .buttonset input[type=button]:hover, .buttonset input[type=submit]:hover, .buttonset button:hover {
285
        z-index: 1;
286
      }
287
      .buttonset {
288
        margin: 2px;
289
        display: inline-block;
290
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25),
291
                            inset 0 0 10px rgba(0,0,0,0.1);
292
      }
293
      select {
294
        -webkit-appearance: none;
295
        background: url(http://i.imgur.com/Lt32a.png) center right no-repeat, -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dddddd));
296
        min-width: 150px;
297
        border: 1px solid #aaaaaa;
298
        border-radius: 3px;
299
        padding: 5px;
300
        padding-right: 34px;
301
        font-size: 12px;
302
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5),
303
                            inset 0 0 10px rgba(0,0,0,0.15);
304
        vertical-align: middle;
305
        cursor: pointer;
306
        text-shadow: 0 1px 0 white;
307
      }
308
      select:hover {
309
        background: url(http://i.imgur.com/Lt32a.png) center right no-repeat, -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#d8d8d8));
310
      }
311
      select:focus {
312
        outline: 0;
313
        -webkit-background-clip: padding-box;
314
        background: url(http://i.imgur.com/Lt32a.png) center right no-repeat, -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#ffffff));
315
      }
316
      select:disabled {
317
        background: url(http://i.imgur.com/Lt32a.png) center right no-repeat, #eeeeee;
318
        opacity: 0.6;
319
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
320
        text-shadow: none;
321
        cursor: default;
322
      }
323
      input[type=checkbox].switch {
324
        width: 24px;
325
        height: 12px;
326
        margin-top: 4px;
327
        border-radius: 6px;
328
        position: relative;
329
        background: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#ffffff));
330
        background: -webkit-linear-gradient(top, #dddddd, #ffffff);
331
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5),
332
                            inset 0 2px 2px rgba(0,0,0,0.1);
333
      }
334
      input[type=checkbox].switch::after {
335
        content: " ";
336
        height: 15px;
337
        width: 15px;
338
        position: absolute;
339
        line-height: auto;
340
        left: -3px;
341
        top: -4px;
342
        margin: 0;
343
        border: 1px solid #aaaaaa;
344
        border-radius: 8.5px;
345
        background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dddddd));
346
        background: -webkit-linear-gradient(top, #ffffff, #dddddd);
347
        -webkit-background-clip: content-box;
348
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5),
349
                            inset 0 0 3px rgba(0,0,0,0.1);
350
      }
351
      input[type=checkbox].switch:checked {
352
        background: -webkit-gradient(linear, left top, left bottom, from(#B1CBDD), to(#CCE9FF));
353
        background: -webkit-linear-gradient(top, #B1CBDD, #CCE9FF);
354
        border: 1px solid #8FA2B3;
355
      }
356
      input[type=checkbox].switch:checked::after {
357
        right: -3px;
358
        left: auto;
359
      }
360
      input[type=checkbox].switch:disabled, input[type=checkbox].switch:disabled::after {
361
        background: #eeeeee;
362
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
363
      }
364
      input[type=checkbox].switch:checked:disabled {
365
        background: #bedaee;
366
      }
367
      .select {
368
        font-family: Helvetica, sans-serif;
369
        font-size: 13px;
370
        margin: 2px;
371
        width: 200px;
372
        border: 1px solid #aaaaaa;
373
        border-radius: 3px;
374
        -webkit-background-clip: content-box;
375
        overflow: hidden;
376
        position: relative;
377
        z-index: 1;
378
        background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dddddd));
379
        background: -webkit-linear-gradient(top, #ffffff, #dddddd);
380
      }
381
      .select input[type=radio] {
382
        -wekit-appearance: none;
383
        padding: 6px 5px!important;
384
        height: auto;
385
        display: block;
386
        margin: 0;
387
        border: 0;
388
        width: 200px;
389
        border-radius: 0;
390
        background: transparent;
391
        border-bottom: 1px solid #aaaaaa;
392
        border-top: 1px solid #ffffff;
393
        position: relative;
394
        z-index: -1;
395
        cursor: pointer;
396
        text-align: left;
397
        font-size: 13px!important;
398
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5),
399
                            inset 0 0 10px rgba(0,0,0,0.1);
400
      }
401
      .select input[type=radio]::after {
402
        content: attr(value);
403
        color: inherit;
404
        text-shadow: none;
405
        font-family: Helvetica, sans-serif;
406
        font-size: 13px;
407
        top: 0;
408
        margin-left: 0;
409
      }
410
      .select input[type=radio]:hover {
411
        background: rgba(0,0,0,0.05);
412
      }
413
      .select input[type=radio]:checked {
414
        background: rgba(190, 218, 238, 0.7);
415
        border-bottom: 1px solid #8FA2B3;
416
        border-top: 1px solid #CCE9FF;
417
        cursor: default;
418
      }
419
      .select input[type=radio]:disabled {
420
        opacity: 0.6;
421
        color: #888888;
422
        cursor: default;
423
        background: transparent;
424
        font-family: Helvetica, sans-serif;
425
        font-size: 13px;
426
      }
427
      .select input[type=radio]:first-child {
428
        border-top: none;
429
      }
430
      .select input[type=radio]:last-child {
431
        border-bottom: none;
432
      }
 

CSS3 Alumina UI (Webkit only)

CSSDeck G+