Ajax Loader
HTML 
<!--
1
<!--
2
autor: Marco Barría
3
https://twitter.com/marco_bf
4
-->
5
 
6
<!----------------------------- single element -->
7
 
8
<div class="hoja">SINGLE</div>
9
 
10
<!----------------------------- + element -->
11
 
12
<div class="contenedor">
13
  MORE
14
  <div class="borderUno"></div>
15
  <div class="borderDos"></div>
16
</div>
 
CSS 
@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
1
@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
2
 
3
// ============================================ VAR
4
 
5
@D:180px; // size control // diametro
6
 
7
@R:(@D/2); // radio
8
 
9
@B:(@R/8);
10
 
11
@O: 0.8; // opacity
12
 
13
@A: 1.5s; // accelerate
14
 
15
// ============================================ GENERAL
16
 
17
html,
18
body{
19
  height:100%;
20
}
21
 
22
body{
23
  background:rgb(255,255,244);
24
}
25
 
26
// ============================================ SINGLE ELEMENT
27
 
28
.hoja{
29
  color:rgb(220,220,226);
30
  position:absolute;
31
  top:50%; left:50%;
32
  margin-left:-@D;
33
  margin-top:-@R;
34
  width:@D;
35
  height:@D;
36
  text-align:center;
37
  font-family: 'Open Sans', sans-serif;
38
  font-size:@R/4;
39
  line-height:@D;
40
  -webkit-font-smoothing: antialiased;
41
}
42
 
43
.hoja:after,
44
.hoja:before{
45
  content:"";
46
  border-radius:100%;
47
  position:absolute;
48
  top:0; left:0;
49
  width:100%;
50
  height:100%;
51
  transform-origin:center center;
52
}
53
 
54
.hoja:after{
55
  box-shadow: inset 0 @B 0 rgba(250, 250, 0, @O),
56
              inset @B 0 0 rgba(250, 200, 0, @O),
57
              inset 0 -@B 0 rgba(250, 150, 0, @O),
58
              inset -@B 0 0 rgba(250, 100, 0, @O);
59
  animation:rotar @A linear infinite;
60
}
61
 
62
.hoja:before{
63
  box-shadow: inset 0 @B 0 rgba(0, 250, 250, @O),
64
              inset @B 0 0 rgba(0, 200, 200, @O),
65
              inset 0 -@B 0 rgba(0, 150, 200, @O),
66
              inset -@B 0 0 rgba(0, 200, 250, @O);
67
  animation:rotarIz @A linear infinite;
68
}
69
 
70
// ============================================ + ELEMENT
71
 
72
.contenedor{
73
  color:rgb(220,220,226);
74
  position:absolute;
75
  top:50%; left:50%;
76
  margin-left:-@R+100px;
77
  margin-top:-@R;
78
  width:@D;
79
  height:@D;
80
  text-align:center;
81
  font-family: 'Open Sans', sans-serif;
82
  font-size:@R/4;
83
  line-height:@D;
84
  -webkit-font-smoothing: antialiased;
85
}
86
 
87
.borderUno,
88
.borderDos{
89
  border-radius:100%;
90
  position:absolute;
91
  top:0; left:0;
92
  width:100%;
93
  height:100%;
94
  transform-origin:center center;
95
}
96
 
97
.borderUno{
98
  box-shadow: inset 0 @B 0 rgba(100, 250, 50, @O),
99
              inset @B 0 0 rgba(50, 200, 150, @O),
100
              inset 0 -@B 0 rgba(150, 150, 0, @O),
101
              inset -@B 0 0 rgba(250, 50, 0, @O);
102
  animation:rotar @A linear infinite;
103
}
104
 
105
.borderDos{
106
  box-shadow: inset 0 @B 0 rgba(0, 250, 250, @O),
107
              inset @B 0 0 rgba(0, 200, 200, @O),
108
              inset 0 -@B 0 rgba(50, 150, 200, @O),
109
              inset -@B 0 0 rgba(50, 200, 250, @O);
110
  animation:rotarIz @A linear infinite;
111
}
112
 
113
// ============================================ KEYFRAMES
114
 
115
@keyframes rotar{
116
  0%{
117
    transform:rotateZ(0deg) scaleX(1) scaleY(1);
118
  }
119
  50%{
120
    transform:rotateZ(180deg) scaleX(0.82) scaleY(0.95);
121
  }
122
  100%{
123
    transform:rotateZ(360deg) scaleX(1) scaleY(1);
124
  }
125
}
126
 
127
@keyframes rotarIz{
128
  0%{
129
    transform:rotateZ(0deg) scaleX(1) scaleY(1);
130
  }
131
  50%{
132
    transform:rotateZ(-180deg) scaleX(0.95) scaleY(0.85);
133
  }
134
  100%{
135
    transform:rotateZ(-360deg) scaleX(1) scaleY(1);
136
  }
137
}
 

Ring CSS

CSSDeck G+