Ajax Loader
HTML 
<ul id="color_picker">
1
<ul id="color_picker">
2
  <li>
3
    <span>Red</span>
4
    <input type="range" value="50" id="r" name="points" min="0" onchange="r_value.value=value" max="255">
5
    <output id="r_value">50</output>
6
  </li>
7
8
  <li>
9
    <span>Green</span>
10
    <input type="range" value="150" id="g" name="points" min="0" onchange="g_value.value=value" max="255">
11
    <output id="g_value">150</output>
12
  </li>
13
14
  <li>
15
    <span>Blue</span>
16
    <input type="range" value="250" id="b" name="points" min="0" onchange="b_value.value=value" max="255">
17
    <output id="b_value">250</output>
18
  </li>
19
</ul>
 
CSS 
html, body {
1
html, body {
2
  height: 300px;
3
  width: 100%;
4
  margin: 0; padding: 0;
5
}
6
 
7
li {
8
  margin: 20px 0;
9
}
10
 
11
li input {width: 255px;}
12
 
13
#color_picker {
14
  margin: 50px auto;
15
  width: 430px;
16
  padding: 10px 40px;
17
  background: rgba(0,0,0,0.2);
18
  border-radius: 5px;
19
  box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.4);
20
  list-style: none;
21
}
22
 
23
output, span {
24
  height: 30px;
25
  width: 80px;
26
  background: rgba(255,255,255,0.5);
27
  padding: 6px 12px;
28
  font-size: 12px;
29
  text-align: center;
30
  border-radius: 5px;
31
  font-family:  Arial, sans-serif;
32
  position: relative;
33
  top: -7px;
34
  margin-left: 20px;
35
}
36
 
37
span {
38
  margin-left: 0;
39
  width: 50px;
40
  margin-right: 20px;
41
  height: 16px;
42
  display: inline-block;
43
}
 
JavaScript 
(function() {
1
(function() {
2
  function setBgColor() {
3
4
    var r = document.getElementById('r').value;
5
    var g = document.getElementById('g').value;
6
    var b = document.getElementById('b').value;
7
8
    document
9
      .getElementsByTagName('body')[0]
10
      .style
11
      .backgroundColor = 'rgb('+r+', '+g+', '+b+')';
12
  }
13
  setBgColor();
14
15
  var input_list = document.getElementsByTagName('input');
16
17
  for (var i = 0; i < input_list.length; i++) {
18
    input_list[i]
19
      .addEventListener('change', setBgColor, false);
20
  }
21
})();
 

Transitioning Background Colors with Color Choosers

CSSDeck G+