Ajax Loader
HTML 
<div id="colorPicker">
1
<div id="colorPicker">
2
  <input type="radio" name="color" value="color" checked="checked" id="1" />
3
  <label for="1"></label>
4
  <input type="radio" name="color" value="color" id="2" />
5
  <label for="2"></label>
6
  <input type="radio" name="color" value="color" id="3" />
7
  <label for="3"></label>
8
  <input type="radio" name="color" value="color" id="4" />
9
  <label for="4"></label>
10
  <input type="radio" name="color" value="color" id="5" />
11
  <label for="5"></label>
12
  <input type="radio" name="color" value="color" id="6" />
13
  <label for="6"></label>
14
  <input type="radio" name="color" value="color" id="7" />
15
  <label for="7"></label>
16
  <input type="radio" name="color" value="color" id="8" />
17
  <label for="8"></label>
18
  <input type="radio" name="color" value="color" id="9" />
19
  <label for="9"></label>
20
  <input type="radio" name="color" value="color" id="10" />
21
  <label for="10"></label>
22
  <input type="radio" name="color" value="color" id="11" />
23
  <label for="11"></label>
24
  <input type="radio" name="color" value="color" id="12" />
25
  <label for="12"></label>
26
  <input type="radio" name="color" value="color" id="13" />
27
  <label for="13"></label>
28
  <input type="radio" name="color" value="color" id="14" />
29
  <label for="14"></label>
30
  <input type="radio" name="color" value="color" id="15" />
31
  <label for="15"></label>
32
  <input type="radio" name="color" value="color" id="16" />
33
  <label for="16"></label>
34
  <input type="radio" name="color" value="color" id="17" />
35
  <label for="17"></label>
36
  <input type="radio" name="color" value="color" id="18" />
37
  <label for="18"></label>
38
  <input type="radio" name="color" value="color" id="19" />
39
  <label for="19"></label>
40
  <input type="radio" name="color" value="color" id="20" />
41
  <label for="20"></label>
42
  <input type="radio" name="color" value="color" id="21" />
43
  <label for="21"></label>
44
  <input type="radio" name="color" value="color" id="22" />
45
  <label for="22"></label>
46
  <input type="radio" name="color" value="color" id="23" />
47
  <label for="23"></label>
48
  <input type="radio" name="color" value="color" id="24" />
49
  <label for="24"></label>
50
  <input type="radio" name="color" value="color" id="25" />
51
  <label for="25"></label>
52
  <input type="radio" name="color" value="color" id="26" />
53
  <label for="26"></label>
54
  <input type="radio" name="color" value="color" id="27" />
55
  <label for="27"></label>
56
  <input type="radio" name="color" value="color" id="28" />
57
  <label for="28"></label>
58
  <input type="radio" name="color" value="color" id="29" />
59
  <label for="29"></label>
60
  <input type="radio" name="color" value="color" id="30" />
61
  <label for="30"></label>
62
  <input type="radio" name="color" value="color" id="31" />
63
  <label for="31"></label>
64
  <input type="radio" name="color" value="color" id="32" />
65
  <label for="32"></label>
66
  <input type="radio" name="color" value="color" id="33" />
67
  <label for="33"></label>
68
  <input type="radio" name="color" value="color" id="34" />
69
  <label for="34"></label>
70
  <input type="radio" name="color" value="color" id="35" />
71
  <label for="35"></label>
72
  <input type="radio" name="color" value="color" id="36" />
73
  <label for="36"></label>
74
  <div id="colorDisplay"></div>
75
</div>
76
 
 
CSS 
body {
1
body {
2
  background: black;
3
  text-align: center;
4
}
5
 
6
input { display: none; }
7
 
8
#colorDisplay{
9
  position: fixed;
10
  border: 1px solid white;
11
  top: 100px;
12
  left: 40%;
13
  width: 150px;
14
  height: 150px;
15
  display: inline-block;
16
}
17
 
18
#colorPicker {
19
  border-radius: 5px;
20
  padding: 0;
21
  height: 35px;
22
  width: 541px;
23
  position: auto;
24
  bottom: 0px;
25
  margin: 0 auto;
26
  background: linear-gradient(to right,
27
    hsla(0, 50%, 50%, 0.5),
28
hsla(10, 50%, 50%, 0.5),
29
hsla(20, 50%, 50%, 0.5),
30
hsla(30, 50%, 50%, 0.5),
31
hsla(40, 50%, 50%, 0.5),
32
hsla(50, 50%, 50%, 0.5),
33
hsla(60, 50%, 50%, 0.5),
34
hsla(70, 50%, 50%, 0.5),
35
hsla(80, 50%, 50%, 0.5),
36
hsla(90, 50%, 50%, 0.5),
37
hsla(100, 50%, 50%, 0.5),
38
hsla(110, 50%, 50%, 0.5),
39
hsla(120, 50%, 50%, 0.5),
40
hsla(130, 50%, 50%, 0.5),
41
hsla(140, 50%, 50%, 0.5),
42
hsla(150, 50%, 50%, 0.5),
43
hsla(160, 50%, 50%, 0.5),
44
hsla(170, 50%, 50%, 0.5),
45
hsla(180, 50%, 50%, 0.5),
46
hsla(190, 50%, 50%, 0.5),
47
hsla(200, 50%, 50%, 0.5),
48
hsla(210, 50%, 50%, 0.5),
49
hsla(220, 50%, 50%, 0.5),
50
hsla(230, 50%, 50%, 0.5),
51
hsla(240, 50%, 50%, 0.5),
52
hsla(250, 50%, 50%, 0.5),
53
hsla(260, 50%, 50%, 0.5),
54
hsla(270, 50%, 50%, 0.5),
55
hsla(280, 50%, 50%, 0.5),
56
hsla(290, 50%, 50%, 0.5),
57
hsla(300, 50%, 50%, 0.5),
58
hsla(310, 50%, 50%, 0.5),
59
hsla(320, 50%, 50%, 0.5),
60
hsla(330, 50%, 50%, 0.5),
61
hsla(340, 50%, 50%, 0.5),
62
hsla(350, 50%, 50%, 0.5)
63
);
64
}
65
 
66
label {
67
  display: inline-block;
68
  height: 35px;
69
  width: 15px;
70
  float: left;
71
}
72
 
73
input:checked + label { border-left: 1px solid white; }
74
 
75
input:nth-child(1):checked ~ #colorDisplay { background: hsla(0, 50%, 50%, 0.5); }
76
input:nth-child(3):checked ~ #colorDisplay {   background: hsla(10, 50%, 50%, 0.5);}
77
input:nth-child(5):checked ~ #colorDisplay {  background: hsla(20, 50%, 50%, 0.5);}
78
input:nth-child(7):checked ~ #colorDisplay {  background: hsla(30, 50%, 50%, 0.5);}
79
input:nth-child(9):checked ~ #colorDisplay {  background: hsla(40, 50%, 50%, 0.5);}
80
input:nth-child(11):checked ~ #colorDisplay {  background: hsla(50, 50%, 50%, 0.5);}
81
input:nth-child(13):checked ~ #colorDisplay {  background: hsla(60, 50%, 50%, 0.5);}
82
input:nth-child(15):checked ~ #colorDisplay {  background: hsla(70, 50%, 50%, 0.5);}
83
input:nth-child(17):checked ~ #colorDisplay {  background: hsla(80, 50%, 50%, 0.5);}
84
input:nth-child(19):checked ~ #colorDisplay {  background: hsla(90, 50%, 50%, 0.5);}
85
input:nth-child(21):checked ~ #colorDisplay {  background: hsla(100, 50%, 50%, 0.5);}
86
input:nth-child(23):checked ~ #colorDisplay {  background: hsla(110, 50%, 50%, 0.5);}
87
input:nth-child(25):checked ~ #colorDisplay {  background: hsla(120, 50%, 50%, 0.5);}
88
input:nth-child(27):checked ~ #colorDisplay {  background: hsla(130, 50%, 50%, 0.5);}
89
input:nth-child(29):checked ~ #colorDisplay {  background: hsla(140, 50%, 50%, 0.5);}
90
input:nth-child(31):checked ~ #colorDisplay {  background: hsla(150, 50%, 50%, 0.5);}
91
input:nth-child(33):checked ~ #colorDisplay {  background: hsla(160, 50%, 50%, 0.5);}
92
input:nth-child(35):checked ~ #colorDisplay {  background: hsla(170, 50%, 50%, 0.5);}
93
input:nth-child(37):checked ~ #colorDisplay {  background: hsla(180, 50%, 50%, 0.5);}
94
input:nth-child(39):checked ~ #colorDisplay {  background: hsla(190, 50%, 50%, 0.5);}
95
input:nth-child(41):checked ~ #colorDisplay {  background: hsla(200, 50%, 50%, 0.5);}
96
input:nth-child(43):checked ~ #colorDisplay {  background: hsla(210, 50%, 50%, 0.5);}
97
input:nth-child(45):checked ~ #colorDisplay {  background: hsla(220, 50%, 50%, 0.5);}
98
input:nth-child(47):checked ~ #colorDisplay {  background: hsla(230, 50%, 50%, 0.5);}
99
input:nth-child(49):checked ~ #colorDisplay {  background: hsla(240, 50%, 50%, 0.5);}
100
input:nth-child(51):checked ~ #colorDisplay {  background: hsla(250, 50%, 50%, 0.5);}
101
input:nth-child(53):checked ~ #colorDisplay {  background: hsla(260, 50%, 50%, 0.5);}
102
input:nth-child(55):checked ~ #colorDisplay {  background: hsla(270, 50%, 50%, 0.5);}
103
input:nth-child(57):checked ~ #colorDisplay {  background: hsla(280, 50%, 50%, 0.5);}
104
input:nth-child(59):checked ~ #colorDisplay {  background: hsla(290, 50%, 50%, 0.5);}
105
input:nth-child(61):checked ~ #colorDisplay {  background: hsla(300, 50%, 50%, 0.5);}
106
input:nth-child(63):checked ~ #colorDisplay {  background: hsla(310, 50%, 50%, 0.5);}
107
input:nth-child(65):checked ~ #colorDisplay {  background: hsla(320, 50%, 50%, 0.5);}
108
input:nth-child(67):checked ~ #colorDisplay {  background: hsla(330, 50%, 50%, 0.5);}
109
input:nth-child(69):checked ~ #colorDisplay {  background: hsla(340, 50%, 50%, 0.5);}
110
input:nth-child(71):checked ~ #colorDisplay {  background: hsla(350, 50%, 50%, 0.5);}
111
 
112
label:nth-child(2):hover ~ #colorDisplay {  background: hsla(0, 50%, 50%, 0.5);}
113
label:nth-child(4):hover ~ #colorDisplay {  background: hsla(10, 50%, 50%, 0.5);}
114
label:nth-child(6):hover ~ #colorDisplay {  background: hsla(20, 50%, 50%, 0.5);}
115
label:nth-child(8):hover ~ #colorDisplay {  background: hsla(30, 50%, 50%, 0.5);}
116
label:nth-child(10):hover ~ #colorDisplay {  background: hsla(40, 50%, 50%, 0.5);}
117
label:nth-child(12):hover ~ #colorDisplay {  background: hsla(50, 50%, 50%, 0.5);}
118
label:nth-child(14):hover ~ #colorDisplay {  background: hsla(60, 50%, 50%, 0.5);}
119
label:nth-child(16):hover ~ #colorDisplay {  background: hsla(70, 50%, 50%, 0.5);}
120
label:nth-child(18):hover ~ #colorDisplay {  background: hsla(80, 50%, 50%, 0.5);}
121
label:nth-child(20):hover ~ #colorDisplay {  background: hsla(90, 50%, 50%, 0.5);}
122
label:nth-child(22):hover ~ #colorDisplay {  background: hsla(100, 50%, 50%, 0.5);}
123
label:nth-child(24):hover ~ #colorDisplay {  background: hsla(110, 50%, 50%, 0.5);}
124
label:nth-child(26):hover ~ #colorDisplay {  background: hsla(120, 50%, 50%, 0.5);}
125
label:nth-child(28):hover ~ #colorDisplay {  background: hsla(130, 50%, 50%, 0.5);}
126
label:nth-child(30):hover ~ #colorDisplay {  background: hsla(140, 50%, 50%, 0.5);}
127
label:nth-child(32):hover ~ #colorDisplay {  background: hsla(150, 50%, 50%, 0.5);}
128
label:nth-child(34):hover ~ #colorDisplay {  background: hsla(160, 50%, 50%, 0.5);}
129
label:nth-child(36):hover ~ #colorDisplay {  background: hsla(170, 50%, 50%, 0.5);}
130
label:nth-child(38):hover ~ #colorDisplay {  background: hsla(180, 50%, 50%, 0.5);}
131
label:nth-child(40):hover ~ #colorDisplay {  background: hsla(190, 50%, 50%, 0.5);}
132
label:nth-child(42):hover ~ #colorDisplay {  background: hsla(200, 50%, 50%, 0.5);}
133
label:nth-child(44):hover ~ #colorDisplay {  background: hsla(210, 50%, 50%, 0.5);
134
}label:nth-child(46):hover ~ #colorDisplay {  background: hsla(220, 50%, 50%, 0.5);}
135
label:nth-child(48):hover ~ #colorDisplay {  background: hsla(230, 50%, 50%, 0.5);}
136
label:nth-child(50):hover ~ #colorDisplay {  background: hsla(240, 50%, 50%, 0.5);}
137
label:nth-child(52):hover ~ #colorDisplay {  background: hsla(250, 50%, 50%, 0.5);}
138
label:nth-child(54):hover ~ #colorDisplay {  background: hsla(260, 50%, 50%, 0.5);}
139
label:nth-child(56):hover ~ #colorDisplay {  background: hsla(270, 50%, 50%, 0.5);}
140
label:nth-child(58):hover ~ #colorDisplay {  background: hsla(280, 50%, 50%, 0.5);}
141
label:nth-child(60):hover ~ #colorDisplay {  background: hsla(290, 50%, 50%, 0.5);}
142
label:nth-child(62):hover ~ #colorDisplay {  background: hsla(300, 50%, 50%, 0.5);}
143
label:nth-child(64):hover ~ #colorDisplay {  background: hsla(310, 50%, 50%, 0.5);}
144
label:nth-child(66):hover ~ #colorDisplay {  background: hsla(320, 50%, 50%, 0.5);}
145
label:nth-child(68):hover ~ #colorDisplay {  background: hsla(330, 50%, 50%, 0.5);}
146
label:nth-child(70):hover ~ #colorDisplay {  background: hsla(340, 50%, 50%, 0.5);}
147
label:nth-child(72):hover ~ #colorDisplay {  background: hsla(350, 50%, 50%, 0.5);}
 

html + css color picker

CSSDeck G+