Ajax Loader
HTML 
<div id="css3icon" />
1
<div id="css3icon" />
 
CSS 
/*
1
/*
2
 Copyright 2013 Nikolai Rassadin <rassadin@gmail.com>
3
 Licensed under CC BY-NC-SA 3.0
4
*/
5
#css3icon {
6
  outline:solid 1px transparent;
7
  display:inline-block;
8
  position:relative;
9
  height:0.8em; width:0.8em;
10
  background:transparent;
11
  color:transparent;
12
  line-height:0.8em;
13
  overflow:visible;
14
  box-shadow:
15
    0.8em  0 0 #38c,
16
    1.4em  0 0 #38c,
17
    2em 0 0 #38c,
18
    2.6em 0 0 #38c,
19
    3.2em 0 0 #38c,
20
    3.6em 0 0 #38c,
21
    4em 0 0 #38c,
22
    4em 0.65em 0 #38c,
23
    0.8em 1.3em 0 #38c,
24
    1.4em 1.3em 0 #38c,
25
    2em 1.3em 0 #38c,
26
    2.6em 1.3em 0 #38c,
27
    3.2em 1.3em 0 #38c,
28
    3.6em 1.3em 0 #38c,
29
    4em 1.3em 0 #38c,
30
    4em 1.9em 0 #38c,
31
    0.8em 2.6em 0 #38c,
32
    4em 2.6em 0 #38c;
33
  transform: skewX(-12deg);
34
  -webkit-transform: skewX(-12deg);
35
  -ms-transform: skewX(-12deg);
36
}
37
#css3icon:before {
38
  position:absolute;
39
  content:'';
40
  display:block;
41
  height:0.8em; width:2em;
42
  margin:3.4em 0 0 0.8em;
43
  background:#38c;
44
  transform: skew(-1deg,18.4deg);
45
  transform-origin: 100% 100%;
46
  -webkit-transform: skew(-1deg,18.4deg);
47
  -webkit-transform-origin: 100% 100%;
48
  -ms-transform: skew(-1deg,18.4deg);
49
  -ms-transform-origin: 100% 100%;
50
  border-right:solid 1px #38c;
51
}
52
#css3icon:after {
53
  position:absolute;
54
  content:'';
55
  display:block;
56
  height:0.8em; width:2em;
57
  margin:3.4em 0 0 2.8em;
58
  background:#38c;
59
  transform: skew(1deg,-18.4deg);
60
  transform-origin: 0% 100%;
61
  -webkit-transform: skew(1deg,-18.4deg);
62
  -webkit-transform-origin: 0 100%;
63
  -ms-transform: skew(1deg,-18.4deg);
64
  -ms-transform-origin: 0 100%;
65
}
66
/* For presentation at cssdesk.com */
67
 
68
body {
69
 width:100%;
70
 padding-top:1em;
71
 font-size:3em;
72
 text-align:center;
73
}
74
body > * { position:relative; left:-2.4em; }
75
 
 

CSS3 Logo in a Single Tag

CSSDeck G+