Ajax Loader
×
HTML
<input id="li0" name="foo" type="radio" /><label for="li0"></label><input checked="" id="li1" name="foo" type="radio" /><label for="li1"></label><input id="li2" name="foo" type="radio" /><label for="li2"></label><input id="li3" name="foo" type="radio" /><label for="li3"></label><input id="li4" name="foo" type="radio" /><label for="li4"></label><input id="li5" name="foo" type="radio" /><label for="li5"></label>
1
<input id="li0" name="foo" type="radio" /><label for="li0"></label><input checked="" id="li1" name="foo" type="radio" /><label for="li1"></label><input id="li2" name="foo" type="radio" /><label for="li2"></label><input id="li3" name="foo" type="radio" /><label for="li3"></label><input id="li4" name="foo" type="radio" /><label for="li4"></label><input id="li5" name="foo" type="radio" /><label for="li5"></label>
 
CSS
html {
1
html {
2
  background: #ff6461;
3
}
4
 
5
body {
6
  position: absolute;
7
  left: 50%;
8
  top: 50%;
9
  height: 214px;
10
  width: 336px;
11
  margin: -107px -168px;
12
}
13
 
14
input {
15
  visibility: hidden;
16
}
17
 
18
label {
19
  position: absolute;
20
  left: 0;
21
  right: 228px;
22
  background: white;
23
  cursor: pointer;
24
  -webkit-transition: left 0.33s 0.33s, right 0.33s 0.33s, top 0.33s, bottom 0.33s;
25
          transition: left 0.33s 0.33s, right 0.33s 0.33s, top 0.33s, bottom 0.33s;
26
}
27
#li0 + label {
28
  top: 14px;
29
  bottom: 164px;
30
}
31
#li1 + label {
32
  top: 64px;
33
  bottom: 114px;
34
}
35
#li2 + label {
36
  top: 114px;
37
  bottom: 64px;
38
}
39
#li3 + label {
40
  top: 164px;
41
  bottom: 14px;
42
}
43
:checked + label {
44
  left: 122px;
45
  right: 0;
46
  top: 14px !important;
47
  bottom: 14px !important;
48
  -webkit-transition: left 0.33s 0.33s, right 0.33s 0.33s, top 0.33s 0.66s, bottom 0.33s 0.66s;
49
          transition: left 0.33s 0.33s, right 0.33s 0.33s, top 0.33s 0.66s, bottom 0.33s 0.66s;
50
}
 

Untitled

CSSDeck G+