Ajax Loader
HTML 
<div class="wrap">
1
<div class="wrap">
2
 
3
<div class="radio-group">
4
  <input id="opt_1" class="radio-group__option" type="radio" name="opt" checked="checked">
5
  <label class="radio-group__label" for="opt_1">
6
    Everyone
7
  </label>
8
9
  <input id="opt_2" class="radio-group__option" type="radio" name="opt">
10
  <label class="radio-group__label" for="opt_2">
11
    Just for me
12
  </label>
13
</div>
14
  
15
  <br/>
16
17
  <div class="log">
18
    Hello log.
19
  </div>
20
 
21
</div>
22
 
23
 
24
 
25
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
 
CSS 
$toggle-inactive-color: #4F5167;
1
$toggle-inactive-color: #4F5167;
2
$toggle-active-color: #389E29;
3
$trans-duration-base: 250ms;
4
 
5
body {
6
  background: #2A2A34;
7
  width: 250px;
8
  height: 28px;
9
  margin: 20px 20px 20px -125px;
10
  overflow: hidden;
11
  position: absolute;
12
  left: 50%;
13
  top: 20%;
14
}
15
16
.log {
17
  color: #DDD;
18
  margin-top: 20%;
19
  padding: 0 5px;
20
  opacity: .3;
21
  transition: all 250ms;
22
  text-align: center;
23
  display: none;
24
}
25
 
26
.radio-group {
27
  width: 250px;
28
  display: table;
29
  table-layout: fixed;
30
  border-spacing: 0;
31
  border-collapse: separate;
32
}
33
 
34
.radio-group__label {
35
  display: table-cell;
36
  height: 28px;
37
  padding: 5px;
38
  vertical-align: middle;
39
  text-align: center;
40
  position: relative;
41
  border: 1px solid $toggle-inactive-color;
42
  border-style: solid none solid solid;
43
  border-radius: 5px 0 0 5px;
44
  color: $toggle-inactive-color;
45
  @include transition(border $trans-duration-base, color $trans-duration-base);
46
}
47
 
48
.radio-group__label + input + .radio-group__label {
49
  border-radius: 0 5px 5px 0;
50
  border-style: solid solid solid none;
51
}
52
53
.radio-group__label + input + .radio-group__label:before {
54
  content: " ";
55
  display: block;
56
  position: absolute;
57
  top:-1px;
58
  width: 100%;
59
  height: 100%;
60
  border: 1px solid $toggle-active-color;
61
  border-radius: 5px 0 0 5px;
62
  transform: translate3d(-103%,0,0);
63
  transition: all $trans-duration-base;
64
}
65
 
66
.radio-group__label + input:checked + .radio-group__label:before {
67
  border-radius: 0 5px 5px 0;
68
  transform: translate3d(-6px,0,0);
69
}
70
71
.radio-group__option:checked + label {
72
  color: $toggle-active-color;
73
}
74
 
75
.radio-group__option {
76
  display: none;
77
}
78
 
 
JavaScript 
function updateLog() {
1
function updateLog() {
2
  var one = $("#opt_1:checked").val() ? "On" : "Off"
3
  var two = $("#opt_2:checked").val() ? "On" : "Off"
4
  $(".log").html("Everyone: " + one + "<br/>Just for me: " + two)
5
}
6
 
7
$(".radio-group__option").change(updateLog)
 

Awesome radio-group

CSSDeck G+