Ajax Loader
HTML 
<div id="slider">
1
<div id="slider">
2
  <input class="bar" type="range" id="rangeinput" value="50" onchange="rangevalue.value=value"/>
3
  <span class="highlight"></span>
4
  <output id="rangevalue">50</output>
5
</div>
 
CSS 
body {
1
body {
2
  background: #2B353E;
3
  margin: 0;
4
  padding: 0;
5
}
6
 
7
#slider {
8
  width: 400px;
9
  height: 17px;
10
  position: relative;
11
  margin: 100px auto;
12
  background: #10171D;
13
14
  -webkit-border-radius: 40px;
15
  -moz-border-radius: 40px;
16
  border-radius: 40px;
17
18
  -webkit-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
19
  -moz-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
20
  box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
21
}
22
 
23
#slider .bar {
24
  width: 388px;
25
  height: 5px;
26
  background: #333;
27
  position: relative;
28
  top: -4px;
29
  left: 4px;
30
31
  background: #1d2e38;
32
  background: -moz-linear-gradient(left, #1d2e38 0%, #2b4254 50%, #2b4254 100%);
33
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1d2e38), color-stop(50%,#2b4254), color-stop(100%,#2b4254));
34
  background: -webkit-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%);
35
  background: -o-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%);
36
  background: -ms-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%);
37
  background: linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%);
38
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d2e38', endColorstr='#2b4254',GradientType=1 );
39
40
  -webkit-border-radius: 40px;
41
  -moz-border-radius: 40px;
42
  border-radius: 40px;
43
}
44
 
45
#slider .highlight {
46
  height: 2px;
47
  position: absolute;
48
  width: 388px;
49
  top: 6px;
50
  left: 6px;
51
52
  -webkit-border-radius: 40px;
53
  -moz-border-radius: 40px;
54
  border-radius: 40px;
55
56
  background: rgba(255, 255, 255, 0.25);
57
}
58
 
59
input[type="range"] {
60
  -webkit-appearance: none;
61
  background-color: black;
62
  height: 2px;
63
}
64
 
65
input[type="range"]::-webkit-slider-thumb {
66
  -webkit-appearance: none;
67
  position: relative;
68
  top: 0px;
69
  z-index: 1;
70
  width: 11px;
71
  height: 11px;
72
  cursor: pointer;
73
  -webkit-box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.6);
74
  -moz-box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.6);
75
  box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.6);
76
  -webkit-border-radius: 40px;
77
  -moz-border-radius: 40px;
78
  border-radius: 40px;
79
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebf1f6), color-stop(50%,#abd3ee), color-stop(51%,#89c3eb), color-stop(100%,#d5ebfb));
80
}
81
 
82
input[type="range"]:hover ~ #rangevalue,input[type="range"]:active ~ #rangevalue {
83
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
84
  filter: alpha(opacity=100);
85
  opacity: 1;
86
  top: -75px;
87
}
88
 
89
/* Tool Tip */
90
#rangevalue {
91
  color: white;
92
  font-size: 10px;
93
  text-align: center;
94
  font-family:  Arial, sans-serif;
95
  display: block;
96
  color: #fff;
97
  margin: 20px 0;
98
  position: relative;
99
  left: 44.5%;
100
  padding: 6px 12px;
101
  border: 1px solid black;
102
 
103
  -webkit-box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.2), 0px 2px 4px 0px rgba(0,0,0,0.4);
104
  -moz-box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.2), 0px 2px 4px 0px rgba(0,0,0,0.4);
105
  box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.2), 0px 2px 4px 0px rgba(0,0,0,0.4);
106
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#222931), color-stop(100%,#181D21));
107
 
108
  -webkit-border-radius: 20px;
109
  -moz-border-radius: 20px;
110
  border-radius: 20px;
111
  width: 18px;
112
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
113
  filter: alpha(opacity=0);
114
  opacity: 0;
115
 
116
  -webkit-transition: all 0.5s ease;
117
  -moz-transition: all 0.5s ease;
118
  -o-transition: all 0.5s ease;
119
  -ms-transition: all 0.5s ease;
120
  transition: all 0.5s ease;
121
  top: -95px;
122
}
 

CSS3 Range Slider (Functional)

CSSDeck G+