Ajax Loader
HTML 
<div class="wrapper">
1
<div class="wrapper">
2
  <div class="map-icon">
3
    <span class="fa fa-map-marker"></span>
4
  </div>
5
  <div class="map-slider">
6
    <div class="buttons">
7
       <span class="fa fa-plus"></span>
8
        <div class="drag-line">
9
          <div class="line"></div>
10
          <div class="draggable-button"></div>  
11
        </div>
12
        <div class="draggable-buton"></div>  
13
       <span class="fa fa-minus"></span>
14
    </div>
15
  </div>
16
</div>
17
 
18
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
19
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
20
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
21
 
22
 
 
CSS 
 
1
 
2
 
3
$background:#ff9770;
4
$sliderBg:#f7f7f7;
5
$line:#adccce;
6
 
7
 
8
*, *:after, *:before {
9
  box-sizing:border-box;
10
}
11
 
12
html, body {background:$background; font-size:16px;}
13
 
14
.wrapper{
15
  width:52px;
16
  margin:12% auto;
17
}
18
 
19
.map-icon {
20
  width: 52px;
21
  height:52px;
22
  background:$sliderBg;
23
  border-radius:3px;
24
  box-shadow: 0 0 3px 1px rgba(0,0,0,0.2);
25
  margin-bottom:15px;
26
  text-align:center;
27
  color:$line;
28
  padding:14px 0;
29
  span {
30
    font-size:1.3em;
31
  }
32
33
}
34
 
35
.map-slider {
36
  width:52px;
37
  height:330px;
38
  background:$sliderBg;
39
  border-radius:3px;
40
  text-align:center;
41
  box-shadow: 0 0 3px 1px rgba(0,0,0,0.2);
42
  position:relative;
43
  color:#866a62;
44
  &::before {
45
    content:"";
46
    width:100%;
47
    height:1px;
48
    background:#dedede;
49
    position:absolute;
50
    left:0;
51
    margin-top:50px;
52
    box-shadow:
53
      0 1px 0 0 white,
54
      0 230px 0 0 #dedede,
55
      0 229px 0 0 white;
56
  }
57
  &::after{
58
  
59
  }
60
  .fa-plus {
61
   display:block;
62
    padding-top:16px;
63
    height:50px;
64
    cursor:pointer;
65
  }
66
  .fa-minus {
67
    display:block;
68
    height:50px;
69
    padding-top:12px;
70
    cursor:pointer;
71
  }
72
  .drag-line {
73
    width:8px;
74
    height:182px;
75
    background:$background;
76
    border-radius:8px;
77
    margin:25px auto;
78
    position:relative;
79
  
80
  }
81
  .line {
82
    width:8px;
83
    height:182px;
84
    background:$line;
85
    border-radius:8px;
86
    margin:25px auto;
87
    position:absolute;
88
    margin-top:0px;
89
    margin-bottom:0px;
90
    padding-top:10px;
91
    clip: rect(0px, 8px, 183px, 0px);
92
  
93
  }
94
95
  .draggable-button {
96
    width:29px;
97
    height:29px;
98
    background:$sliderBg;
99
    border-radius:50%;
100
    position:absolute;
101
    box-shadow: 0px 4px 10px 1px rgba(0,0,0,0.2);
102
    margin-left:-9px;
103
    cursor:pointer;
104
  }
105
}
 
JavaScript 
 
1
 
2
var lineHeight = ($('.drag-line').height())-15;
3
 
4
$('.draggable-button').draggable({
5
            axis: 'y',
6
            containment: 'parent'
7
});  
8
 
9
$('.draggable-button').on('drag', function(){
10
   var position = $('.draggable-button').position();
11
  var marginTop = position.top;
12
  $('.line').css({
13
    'clip': 'rect('+ marginTop +'px,8px, 183px,0px)'
14
  });
15
16
});
17
 
18
 
19
$('.fa-minus').on('click', function(){
20
  var position = $('.draggable-button').position();
21
  var marginTop = position.top;
22
  
23
  $('.line').css({
24
    'clip': 'rect('+ (marginTop+14) +'px,8px, 183px,0px)'
25
  });
26
27
  if( marginTop < lineHeight){  
28
    $('.draggable-button').css({
29
    'top': marginTop + 14
30
  });
31
  
32
  }
33
});
34
 
35
$('.fa-plus').on('click', function(){
36
  var position = $('.draggable-button').position();
37
  var marginTop = position.top;
38
39
  $('.line').css({
40
    'clip': 'rect('+ (marginTop-14) +'px,8px, 183px,0px)'
41
  });
42
43
  if( marginTop > 0){
44
  
45
    $('.draggable-button').css({
46
    'top': marginTop - 14
47
  });
48
  }
49
});
50
 
51
 
 

Slider

CSSDeck G+