Ajax Loader
×
HTML
<div>
1
<div>
2
  <input type="checkbox" id="padlock"/>
3
  <label for="padlock"><div></div></label>
4
  
5
</div>
 
CSS
@on: #484;
1
@on: #484;
2
@off: #844;
3
 
4
body { background-image: linear-gradient(#eee, #aaa); }
5
div { margin: 45%; }
6
input { display: none; }
7
label { 
8
  display: inline-block;
9
  background: @off;
10
  border-radius: 1em;
11
  height: 3.5em;
12
  width: 3.5em;
13
  transition: all 1s ease;
14
}
15
label > div:before {
16
  content: '';
17
  border: .5em solid white;
18
  display: inline-block;
19
  border-radius: 50%;
20
  margin-left: -0.74em;
21
  margin-top: -0.5em;
22
  position: absolute;
23
}
24
label > div {
25
  border-left: .5em solid white;
26
  display: inline-block;
27
  height: 1.5em;
28
  left: 1.5em;
29
  top: 1em;
30
  position: absolute;
31
}
32
label:before {
33
  content: '';
34
  border: .3em solid @off;
35
  border-bottom: none;
36
  display: inline-block;
37
  position: absolute;
38
  border-radius: 1.5em 1.5em 0 0;
39
  height: 1em;
40
  width: 2em;
41
  margin-left: 0.5em;
42
  margin-top: -1.7em;
43
  transform-origin: 2.33em 0 0;
44
  transform: rotateY(180deg);
45
  transition: all 1s ease;
46
}
47
label:after {
48
  content: '';
49
  border-left: .3em solid @off;
50
  display: inline-block;
51
  height: 1.5em;
52
  margin-left: 2.7em;
53
  margin-top: -1em;
54
  transition: all 1s ease;
55
}
56
 
57
input:checked + label {
58
  background: @on;
59
}
60
input:checked + label:before {
61
  border-color: @on;
62
  margin-top: -1em;
63
  transform: rotateY(0deg);
64
}
65
input:checked + label:after {
66
  border-color: @on;
67
  margin-top: 0;
68
}
 

css3 padlock

CSSDeck G+