Ajax Loader
×
HTML 
<ul>
1
<ul>
2
  <li>
3
    <i><i><i><i><i><i><i><i><i><i><i><i><i><i>l<i>o<i>a<i>d<i>i<i>n<i>g<i></i></i></i></i></i></i></i></i></i></i></i></i></i></i></i></i></i></i></i></i></i>
4
  </li>
5
</ul>
 
CSS 
@import url(http://fonts.googleapis.com/css?family=Quicksand:700);
1
@import url(http://fonts.googleapis.com/css?family=Quicksand:700);
2
 
3
* {
4
  margin: 0;
5
  padding: 0;
6
}
7
 
8
i {
9
  margin: 0;
10
  padding: 0;
11
  border: 0;
12
  font-size: 100%;
13
  font: inherit;
14
  vertical-align: baseline;
15
}
16
 
17
html,
18
body {
19
  height: 100%;
20
  -webkit-font-smoothing: antialiased;
21
}
22
 
23
body {
24
  background: #52596d;
25
  font-family: 'Quicksand', sans-serif;
26
  font-size: 2em;
27
}
28
 
29
ul {
30
  display: block;
31
  position: absolute;
32
  top: 50%;
33
  left: 50%;
34
  margin: 0 0 0 -60px;
35
  list-style: none;
36
  width: 120px;
37
  perspective: 1000px;
38
}
39
 
40
i {
41
  background: rgba(0,200,200,0);
42
  color: #f8e9d1;
43
  display: inline-block;
44
  transform-origin: center;
45
  transform-style: preserve-3d;
46
  animation: rotar 4s infinite ease-in-out;
47
}
48
 
49
@keyframes rotar {
50
  0%, 68% {
51
    transform: rotate3d(1,0,0,0deg) scaleY(1) scaleX(1);
52
  }
53
  30%, 45% {
54
    transform: rotate3d(1,0,0,35deg) scaleY(0.95) scaleX(1.01);
55
  }
56
  48% {
57
    transform: rotate3d(1,0,0,-5deg) scaleY(1.01) scaleX(0.98);
58
  }
59
  53% {
60
    transform: rotate3d(1,0,0,5deg) scaleY(0.98) scaleX(1.01);
61
  }
62
  58% {
63
    transform: rotate3d(1,0,0,-3deg) scaleY(1.005) scaleX(0.99);
64
  }
65
  63%{
66
    transform: rotate3d(1,0,0,2deg) scaleY(0.99) scaleX(1.005);
67
  }
68
}
 

css loading

CSSDeck G+