Ajax Loader
HTML 
<ul class="todolist">
1
<ul class="todolist">
2
  <li class="task">
3
    <input type="checkbox" id="task1" />
4
    <label for="task1">Task 1</label>
5
  </li>
6
  <li class="task">
7
    <input type="checkbox" id="task2" checked />
8
    <label for="task2">Task 2</label>
9
  </li>
10
  <li class="task">
11
    <input type="checkbox" id="task3" />
12
    <label for="task3">Task 3</label>
13
  </li>
14
  <li class="task">
15
    <input type="checkbox" id="task4" />
16
    <label for="task4">Task 4</label>
17
  </li>
18
</ul>
 
CSS 
@import url(http://weloveiconfonts.com/api/?family=entypo);
1
@import url(http://weloveiconfonts.com/api/?family=entypo);
2
 
3
html, body, div, span, applet, object, iframe,
4
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
5
a, abbr, acronym, address, big, cite, code,
6
del, dfn, em, img, ins, kbd, q, s, samp,
7
small, strike, strong, sub, sup, tt, var,
8
b, u, i, center,
9
dl, dt, dd, ol, ul, li,
10
fieldset, form, label, legend,
11
table, caption, tbody, tfoot, thead, tr, th, td,
12
article, aside, canvas, details, embed,
13
figure, figcaption, footer, header, hgroup,
14
menu, nav, output, ruby, section, summary,
15
time, mark, audio, video {
16
  margin: 0;
17
  padding: 0;
18
  border: 0;
19
  font-size: 100%;
20
  font: inherit;
21
  vertical-align: baseline;
22
}
23
/* HTML5 display-role reset for older browsers */
24
article, aside, details, figcaption, figure,
25
footer, header, hgroup, menu, nav, section {
26
  display: block;
27
}
28
body {
29
  line-height: 1;
30
}
31
ol, ul {
32
  list-style: none;
33
}
34
blockquote, q {
35
  quotes: none;
36
}
37
blockquote:before, blockquote:after,
38
q:before, q:after {
39
  content: '';
40
  content: none;
41
}
42
table {
43
  border-collapse: collapse;
44
  border-spacing: 0;
45
}
46
html,body{
47
  height:100%;
48
}
49
body{
50
  background:#3E4651;
51
  text-align: center;
52
}
53
body:before {
54
  content: '';
55
  display: inline-block;
56
  height: 100%;
57
  vertical-align: middle;
58
  margin-right: -0.25em;
59
}
60
.todolist{
61
  display: inline-block;
62
  vertical-align: middle;
63
  width: 20em;
64
  box-shadow:inset 0 0 5px rgba(0,0,0,0.1);
65
  font-family: 'Armata', sans-serif;
66
  font-weight:bold;
67
  color:#FAFAFA;
68
  overflow:hidden;
69
  border: 1em solid rgba(255, 255, 255, 0.04);
70
  border-top-color: rgba(0, 0, 0, 0.05);
71
  border-bottom-color: rgba(0, 0, 0, 0.05);
72
}
73
input{
74
  position:absolute;
75
  left:-9999px;
76
}
77
.task{
78
  display:block;
79
  height:5em;
80
  transition: 500ms ease;
81
}
82
.task:hover {
83
box-shadow: inset -30px 0 30px -20px rgba(0, 0, 0, 0.4),inset 30px 0 30px -20px rgba(0, 0, 0, 0.4);
84
}
85
label{
86
  position: relative;
87
  cursor: pointer;
88
  display: block;
89
  height: 100%;
90
  background: #F1654C;
91
  font-size:1.5em;
92
  line-height: 3.5em;
93
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
94
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -2px 0 rgba(0, 0, 0, 0.05),inset -2px 0px 0 rgba(0, 0, 0, 0.05);
95
  transform-style: preserve-3d;
96
  perspective: 0;
97
  transform-origin: 150px 0 -150px;
98
  transition: 500ms ease;
99
  z-index: -1;
100
}
101
label:after{
102
  content:"\2713";
103
  font-family: 'entypo', sans-serif;
104
  position:absolute;
105
  height:100%;
106
  width:100%;
107
  background:#00B5B5;
108
  right:-100%;
109
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
110
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
111
  transform-origin: 0 0 0;
112
  transform: rotateY(90deg);
113
}
114
label:before {
115
content: "";
116
position: absolute;
117
height: 100%;
118
width: 30%;
119
right: -15%;
120
background: rgba(0, 0, 0, 0);
121
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
122
z-index: 4;
123
transform: rotateY(45deg);
124
transition: 500ms ease;
125
}
126
.task:hover label:before{
127
  box-shadow: 0 -15px 20px -20px rgba(0, 0, 0, 0.2);
128
}
129
.task:hover label{
130
transform: rotateY(-20deg);
131
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -2px 0 rgba(0, 0, 0, 0.05),inset -3px 0px 0 rgba(0, 0, 0, 0.05);
132
}
133
.task:hover label:after{
134
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -2px 0 rgba(0, 0, 0, 0.05),inset 2px 0px 0 rgba(255, 255, 255, 0.2);}
135
 
136
.task:hover input:checked +label:after{
137
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
138
}
139
.task:hover input:checked + label{
140
  transform: rotateY(-70deg);
141
}
142
 
143
input:checked + label{
144
  transform: rotateY(-90deg);
145
}
 

Todo List

CSSDeck G+