Ajax Loader
HTML 
<header class="header">
1
<header class="header">
2
3
</header>
4
 
5
<section class="content">
6
  <ul class="list">
7
    <li class="list__item">
8
      <label class="label--checkbox">
9
          <input type="checkbox" class="checkbox" checked>
10
            Item 1
11
      </label>
12
    </li>
13
    <li class="list__item">
14
      <label class="label--checkbox">
15
          <input type="checkbox" class="checkbox">
16
            Item 2
17
      </label>
18
    </li>
19
    <li class="list__item">
20
      <label class="label--checkbox">
21
          <input type="checkbox" class="checkbox">
22
            Item 3
23
      </label>
24
    </li>
25
    <li class="list__item">
26
      <label class="label--checkbox">
27
          <input type="checkbox" class="checkbox">
28
            Item 4
29
      </label>
30
    </li>
31
  </ul>
32
</section>
 
CSS 
$baseFontSize: 16;
1
$baseFontSize: 16;
2
 
3
$green: #009688;
4
$blue: #5677fc;
5
$blueDark: #3b50ce;
6
 
7
$slideDistance: 100;
8
$slideDuration: .4s;
9
 
10
@function rem($val) {
11
  @return #{$val / $baseFontSize}rem;
12
}
13
 
14
body {
15
  font-size: #{$baseFontSize}px;
16
  margin: 0;
17
}
18
 
19
.header {
20
  height: 8rem;
21
22
  background:  $green;
23
}
24
 
25
.content {
26
  @extend %slide-up;
27
28
  width: 20rem;
29
  margin: -4rem auto 0 auto;
30
  padding: 1rem;
31
32
  background: #fff;
33
34
  border-radius: rem(2);
35
  box-shadow: 0 rem(2) rem(5) 0 rgba(0, 0, 0, 0.25);
36
}
37
 
38
.list {
39
  margin: .5rem;
40
}
41
 
42
.list__item {
43
  margin: 0 0 .5rem 0;
44
  padding: 0;
45
}
46
 
47
.label--checkbox {
48
  position: relative;
49
 
50
  margin: .5rem;
51
52
  font-family: Arial, sans-serif;
53
  line-height: 135%;
54
55
  cursor: pointer;
56
}
57
 
58
.checkbox {
59
  position: relative;
60
  top: rem(-6);
61
62
  margin: 0 1rem 0 0 ;
63
64
  cursor: pointer;
65
66
  &:before {
67
    @include transition(all .3s ease-in-out);
68
  
69
    content: "";
70
  
71
    position: absolute;
72
    left: 0;
73
    z-index: 1;
74
75
    width: 1rem;
76
    height: 1rem;
77
  
78
    border: 2px solid #f2f2f2;
79
  }
80
81
  &:checked {
82
    &:before {
83
       @include transform(rotate(-45deg));
84
85
      height: .5rem;
86
87
      border-color: $green;
88
      border-top-style: none;
89
      border-right-style: none;
90
    }
91
  }
92
93
  &:after {
94
    content: "";
95
  
96
    position: absolute;
97
    top: rem(-2);
98
    left: 0;
99
  
100
    width: 1.1rem;
101
    height: 1.1rem;
102
  
103
    background: #fff;
104
  
105
    cursor: pointer;
106
  }
107
}
108
 
109
.button--round {
110
  @include transition(.3s background ease-in-out);
111
112
  width: 2rem;
113
  height: 2rem;
114
115
  background: $blue;
116
117
  border-radius: 50%;
118
  box-shadow: 0 rem(2) rem(5) 0 rgba(0, 0, 0, 0.25);
119
120
  color: #fff;
121
  text-decoration: none;
122
  text-align: center;
123
124
  i {
125
    font-size: 1rem;
126
    line-height: 220%;
127
    vertical-align: middle;
128
  }
129
130
  &:hover {
131
    background: $blueDark;
132
  }
133
}
134
 
135
.button--sticky {
136
  position: fixed;
137
  right: 2rem;
138
  top: 16rem;
139
}
140
 
141
%slide-up {
142
  -webkit-animation-duration: $slideDuration;
143
  animation-duration: $slideDuration;
144
  -webkit-animation-fill-mode: both;
145
  animation-fill-mode: both;
146
  -webkit-animation-name: slideUp;
147
  animation-name: slideUp;
148
  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
149
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
150
}
151
 
152
@-webkit-keyframes slideUp {
153
  0% {
154
    -webkit-transform: translateY(rem($slideDistance));
155
    transform: translateY(rem($slideDistance));
156
  }
157
 
158
  100% {
159
    -webkit-transform: translateY(0);
160
    transform: translateY(0);
161
  }
162
}
163
 
164
@keyframes slideUp {
165
  0% {
166
    -webkit-transform: translateY(rem($slideDistance));
167
    transform: translateY(rem($slideDistance));
168
  }
169
 
170
  100% {
171
    -webkit-transform: translateY(0);
172
    transform: translateY(0);
173
  }
174
}
175
li {
176
  list-style: none;
177
}
 

Google material style checkbox (css only)

CSSDeck G+