Ajax Loader
HTML 
<div class="trafficlight">
1
<div class="trafficlight">
2
  <div class="protector"></div>
3
  <div class="protector"></div>
4
  <div class="protector"></div>
5
  <div class="red"></div>
6
  <div class="yellow"></div>
7
  <div class="green"></div>
8
</div>
 
CSS 
html{
1
html{
2
  background: linear-gradient(#08f, #fff);
3
  padding: 40px;
4
  width: 170px;
5
  height: 100%;
6
  margin: 0 auto;
7
}
8
 
9
.protector{
10
  background: transparent;
11
  width: 180px;
12
  height: 0;
13
  position: absolute;
14
  top: 20px;
15
  left: -35px;
16
  border-right: solid 30px transparent;
17
  border-left: solid 30px transparent;
18
  border-top: solid 90px #111;
19
  border-radius: 10px;
20
  z-index: -1;
21
}
22
 
23
.protector:nth-child(2){
24
  top: 140px;
25
}
26
 
27
.protector:nth-child(3){
28
  top: 260px;
29
}
30
 
31
.trafficlight{
32
  background: #222;
33
  background-image: linear-gradient(transparent 2%, #111 2%, transparent 3%, #111 30%);
34
  width: 170px;
35
  height: 400px;
36
  border-radius: 10px;
37
  position: relative;
38
  border: solid 5px #333;
39
}
40
 
41
 
42
.trafficlight:before{
43
  background: #222;
44
  background-image: radial-gradient(#444, #000);
45
  content: "";
46
  width: 170px;
47
  height: 150px;
48
  margin: 0 auto;
49
  position: absolute;
50
  top: -30px;
51
  margin-left: 0px;
52
  border-radius: 50%;
53
  z-index: -1;
54
}
55
 
56
.trafficlight:after{
57
  background: #222;
58
  background-image: linear-gradient(-0deg, #444, #ccc 30%, #000);
59
  content: "";
60
  width: 75px;
61
  height: 800px;
62
  margin-left: 50px;
63
  position: absolute;
64
  top: 150px;
65
  z-index: -1;
66
}
67
 
68
.red{
69
  background: red;
70
  background-image: radial-gradient(brown, transparent);
71
  background-size: 5px 5px;
72
  width: 100px;
73
  height: 100px;
74
  border-radius: 50%;
75
  position: absolute;
76
  top: 20px;
77
  left: 35px;
78
  animation: 13s red infinite;
79
  box-shadow:
80
    0 0 20px #111 inset,
81
    0 0 10px red;
82
}
83
 
84
.yellow{
85
  background: yellow;
86
  background-image: radial-gradient(orange, transparent);
87
  background-size: 5px 5px;
88
  width: 100px;
89
  height: 100px;
90
  border-radius: 50%;
91
  position: absolute;
92
  top: 145px;
93
  left: 35px;
94
  animation: 13s yellow infinite;
95
  box-shadow:
96
    0 0 20px #111 inset,
97
    0 0 10px yellow;
98
}
99
 
100
.green{
101
  background: green;
102
  background-image: radial-gradient(lime, transparent);
103
  background-size: 5px 5px;
104
  width: 100px;
105
  height: 100px;
106
  border-radius: 50%;
107
  position: absolute;
108
  top: 270px;
109
  left: 35px;
110
  box-shadow:
111
    0 0 20px #111 inset,
112
    0 0 10px lime;
113
  animation: 13s green infinite;
114
}
115
 
116
@keyframes red{
117
  0%{opacity: 1;}
118
  20%{opacity: 1;}
119
  40%{opacity: 1;}
120
  60%{opacity: .1;}
121
  80%{opacity: .1;}
122
  100%{opacity: .1;}
123
}
124
 
125
@keyframes yellow{
126
  0%{opacity: .1;}
127
  20%{opacity: .1;}
128
  40%{opacity: 1;}
129
  50%{opacity: .1;}
130
  60%{opacity: .1;}
131
  80%{opacity: .1;}
132
  100%{opacity: .1;}
133
}
134
 
135
@keyframes green{
136
  0%{opacity: .1;}
137
  20%{opacity: .1;}
138
  40%{opacity: .1;}
139
  60%{opacity: 1;}
140
  80%{opacity: 1;}
141
  85%{opacity: .1;}
142
  90%{opacity: 1;}
143
  95%{opacity: .1;}
144
  100%{opacity: 1;}
145
}
 

Stoplight Using HTML and CSS

CSSDeck G+