Ajax Loader
HTML
<!DOCTYPE HTML>
1
<!DOCTYPE HTML>
2
<html lang="EN">
3
<head>
4
  <meta charset="UTF-8"/>
5
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
6
</head>
7
<body>
8
  <div class="wait">Please wait</div>
9
  <div class="loader">
10
    <div class="inner a"></div>
11
    <div class="inner b"></div>
12
    <div class="inner c"></div>
13
    <div class="inner d"></div>
14
  </div>
15
</body>
16
</html>
 
CSS
* {
1
* {
2
  margin: 0;
3
  padding: 0;
4
}
5
body {
6
  background: #333;
7
  color: #EEE;
8
  padding-top: 40px;
9
  font-family: 'Open Sans', sans-serif;
10
  font-size: 22px;
11
}
12
.wait {
13
  position: relative;
14
  margin: 10px auto;
15
  text-align: center;
16
  animation: fadey 2s linear infinite;
17
}
18
.loader {
19
  position: relative;
20
  background: #EEE;
21
  width: 120px;
22
  height: 120px;
23
  margin: 4px auto;
24
  animation: distort 2s ease-out infinite;
25
}
26
.inner {
27
  position: relative;
28
  float: left;
29
  width: 40px;
30
  height: 40px;
31
  margin: 10px;
32
  background: #FFF;
33
  border-radius: 20px;
34
  animation: inner 2s ease-out infinite;
35
}
36
.inner.a {
37
  background: #E85A80;
38
}
39
.inner.b {
40
  background: #FAC140;
41
}
42
.inner.c {
43
  background: #4AB9B0;
44
}
45
.inner.d {
46
  background: #A4D27A;
47
}
48
@keyframes distort {
49
 0% {
50
    transform: rotate(0deg);
51
    border-radius: 0px;
52
 }
53
 50% {
54
    transform: rotate(90deg);
55
    border-radius: 60px;
56
    background: #AAA;
57
    
58
 }
59
 100% {
60
    transform: rotate(180deg);
61
    border-radius: 0px;
62
 }
63
}
64
@keyframes inner {
65
 0% {
66
    opacity: 0;
67
    border-radius: 20px;
68
  width: 20px;
69
  height: 20px;
70
  margin: 20px;
71
 }
72
 50% {
73
    opacity: 1;
74
    border-radius: 0px;
75
  width: 60px;
76
  height: 60px;
77
  margin: 0px;
78
 }
79
 100% {
80
    opacity: 0;
81
    border-radius: 20px;
82
  width: 20px;
83
  height: 20px;
84
  margin: 20px;
85
 }
86
}
87
@keyframes fadey {
88
  0% {
89
    opacity: 0.2;
90
  }
91
  50% {
92
    opacity: 1;
93
  }
94
  100% {
95
    opacity: 0.2;
96
  }
97
}
 

CSS3 loading animation

CSSDeck G+