Ajax Loader
×
HTML 
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
1
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
2
 
3
<h1>A collection of loaders using CSS 2D and 3D transforms </h1>
4
 
5
<h2>Flip Delay Up</h2>
6
 
7
<div class="loader loader--flipDelay loader--3d">
8
  <span class="loader-item">1</span>
9
  <span class="loader-item">2</span>
10
  <span class="loader-item">3</span>
11
  <span class="loader-item">4</span>
12
  <span class="loader-item">5</span>
13
  <span class="loader-item">6</span>
14
</div>
15
 
16
 
17
<h2>Flip Delay Down</h2>
18
 
19
<div class="loader loader--flipDelayDown loader--3d">
20
  <span class="loader-item">1</span>
21
  <span class="loader-item">2</span>
22
  <span class="loader-item">3</span>
23
  <span class="loader-item">4</span>
24
  <span class="loader-item">5</span>
25
  <span class="loader-item">6</span>
26
</div>
27
 
28
<h2>Flip Effect 2D</h2>
29
 
30
<div class="loader loader--slowFlip">
31
  <span class="loader-item">1</span>
32
  <span class="loader-item">2</span>
33
  <span class="loader-item">3</span>
34
  <span class="loader-item">4</span>
35
  <span class="loader-item">5</span>
36
  <span class="loader-item">6</span>
37
</div>
38
 
39
<h2>Flip Effect 3D</h2>
40
 
41
<div class="loader loader--slowFlip loader--3d">
42
  <span class="loader-item">1</span>
43
  <span class="loader-item">2</span>
44
  <span class="loader-item">3</span>
45
  <span class="loader-item">4</span>
46
  <span class="loader-item">5</span>
47
  <span class="loader-item">6</span>
48
</div>
49
 
50
 
51
<h2>Horizontal Flip 3D</h2>
52
 
53
<div class="loader loader--flipHoz loader--3d">
54
  <span class="loader-item">1</span>
55
  <span class="loader-item">2</span>
56
  <span class="loader-item">3</span>
57
  <span class="loader-item">4</span>
58
  <span class="loader-item">5</span>
59
  <span class="loader-item">6</span>
60
</div>
61
 
62
 
63
<h2>Horizontal Fade</h2>
64
 
65
<div class="loader loader--fade">
66
  <span class="loader-item">1</span>
67
  <span class="loader-item">2</span>
68
  <span class="loader-item">3</span>
69
  <span class="loader-item">4</span>
70
  <span class="loader-item">5</span>
71
  <span class="loader-item">6</span>
72
</div>
73
 
74
 
75
<h2>Slide Down</h2>
76
 
77
<div class="loader loader--slideDown">
78
  <span class="loader-item">1</span>
79
  <span class="loader-item">2</span>
80
  <span class="loader-item">3</span>
81
  <span class="loader-item">4</span>
82
  <span class="loader-item">5</span>
83
  <span class="loader-item">6</span>
84
</div>
85
 
86
 
87
 
88
<h2>Slide Up</h2>
89
 
90
<div class="loader loader--slideUp">
91
  <span class="loader-item">1</span>
92
  <span class="loader-item">2</span>
93
  <span class="loader-item">3</span>
94
  <span class="loader-item">4</span>
95
  <span class="loader-item">5</span>
96
  <span class="loader-item">6</span>
97
</div>
98
 
99
<h2>Slide Both</h2>
100
 
101
<div class="loader loader--slideBoth">
102
  <span class="loader-item">1</span>
103
  <span class="loader-item">2</span>
104
  <span class="loader-item">3</span>
105
  <span class="loader-item">4</span>
106
  <span class="loader-item">5</span>
107
  <span class="loader-item">6</span>
108
</div>
 
CSS 
body {
1
body {
2
  font-family: 'PT Sans', sans-serif;
3
  text-align: center;
4
  background-color: #000;
5
  padding-top: 40px;
6
}
7
 
8
h1, h2 {
9
  background-color: rgba(200, 200, 200, 0.2);
10
  padding: 20px;
11
  text-transform: uppercase;
12
  color: #fff;
13
}
14
 
15
h1 {
16
  font-size: 24px;
17
  margin-bottom: 40px;
18
}
19
h1 a {
20
  display: block;
21
  margin-top: 10px;
22
  text-transform: none;
23
  color: #aaa;
24
  font-size: 16px;
25
  text-decoration: none;
26
}
27
 
28
h2 {
29
  font-size: 16px;
30
  margin-bottom: 15%;
31
}
32
 
33
.loader {
34
  display: block;
35
  overflow: hidden;
36
  margin-bottom: 15%;
37
  font-size: 0;
38
}
39
 
40
.loader--3d {
41
  transform-style: preserve-3d;
42
  perspective: 800px;
43
}
44
 
45
.loader--slideBoth {
46
  overflow: visible;
47
}
48
 
49
.loader-item {
50
  display: inline-block;
51
  width: 50px;
52
  height: 50px;
53
  margin-left: 2px;
54
  background-color: rgba(61, 92, 126, 0.7);
55
  color: rgba(61, 92, 126, 0.7);
56
  animation-duration: 2000ms;
57
  animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
58
  animation-iteration-count: infinite;
59
}
60
.loader-item:nth-child(1) {
61
  animation-delay: 100ms;
62
}
63
.loader-item:nth-child(2) {
64
  animation-delay: 200ms;
65
}
66
.loader-item:nth-child(3) {
67
  animation-delay: 300ms;
68
}
69
.loader-item:nth-child(4) {
70
  animation-delay: 400ms;
71
}
72
.loader-item:nth-child(5) {
73
  animation-delay: 500ms;
74
}
75
.loader-item:nth-child(6) {
76
  animation-delay: 600ms;
77
}
78
.loader--slowFlip .loader-item {
79
  animation-name: slowFlip;
80
}
81
.loader--flipHoz .loader-item {
82
  animation-name: flipHoz;
83
}
84
.loader--fade .loader-item {
85
  animation-name: fade;
86
  animation-duration: 1000ms;
87
}
88
.loader--slowFlip .loader-item:nth-child(1), .loader--flipHoz .loader-item:nth-child(1) {
89
  animation-delay: 150ms;
90
}
91
.loader--slowFlip .loader-item:nth-child(2), .loader--flipHoz .loader-item:nth-child(2) {
92
  animation-delay: 300ms;
93
}
94
.loader--slowFlip .loader-item:nth-child(3), .loader--flipHoz .loader-item:nth-child(3) {
95
  animation-delay: 450ms;
96
}
97
.loader--slowFlip .loader-item:nth-child(4), .loader--flipHoz .loader-item:nth-child(4) {
98
  animation-delay: 600ms;
99
}
100
.loader--slowFlip .loader-item:nth-child(5), .loader--flipHoz .loader-item:nth-child(5) {
101
  animation-delay: 750ms;
102
}
103
.loader--slowFlip .loader-item:nth-child(6), .loader--flipHoz .loader-item:nth-child(6) {
104
  animation-delay: 900ms;
105
}
106
.loader--flipDelay .loader-item {
107
  animation-name: flipDelay;
108
}
109
.loader--flipDelayDown .loader-item {
110
  animation-name: flipDelay;
111
  animation-direction: reverse;
112
}
113
.loader--slideDown .loader-item, .loader--slideUp .loader-item {
114
  animation-name: slideDown;
115
  animation-duration: 800ms;
116
  animation-timing-function: linear;
117
}
118
.loader--slideDown .loader-item {
119
  transform-origin: top left;
120
}
121
.loader--slideUp .loader-item {
122
  transform-origin: bottom left;
123
}
124
.loader--slideBoth .loader-item {
125
  animation-name: slideBoth;
126
  animation-duration: 1000ms;
127
  transform-origin: bottom left;
128
  animation-timing-function: linear;
129
}
130
 
131
/**********************************/
132
/* KEYFRAME ANIMATION DEFINITIONS */
133
/**********************************/
134
@keyframes slowFlip {
135
  0% {
136
    transform: rotateX(0deg);
137
  }
138
  40% {
139
    transform: rotateX(180deg);
140
  }
141
  100% {
142
    transform: rotateX(180deg);
143
  }
144
}
145
@keyframes flipHoz {
146
  0% {
147
    transform: rotateY(0deg);
148
  }
149
  40% {
150
    transform: rotateY(180deg);
151
  }
152
  100% {
153
    transform: rotateY(180deg);
154
  }
155
}
156
@keyframes fade {
157
  0% {
158
    opacity: 0;
159
  }
160
  50% {
161
    opacity: 1;
162
  }
163
  100% {
164
    opacity: 0;
165
  }
166
}
167
@keyframes flipDelay {
168
  0% {
169
    transform: rotateX(0deg);
170
    transform-origin: 0 0 0;
171
    opacity: 1;
172
  }
173
  30% {
174
    transform: rotateX(90deg);
175
    transform-origin: 0 0 0;
176
    opacity: 0;
177
  }
178
  40% {
179
    transform-origin: 0 0 0;
180
  }
181
  60% {
182
    transform: rotateX(90deg);
183
    opacity: 0;
184
    transform-origin: 0 100% 0;
185
  }
186
  90% {
187
    transform: rotateX(0deg);
188
    opacity: 1;
189
    transform-origin: 0 100% 0;
190
  }
191
}
192
@keyframes slideDown {
193
  0% {
194
    transform: rotateX(0deg);
195
  }
196
  50% {
197
    transform: rotateX(90deg);
198
  }
199
}
200
@keyframes slideBoth {
201
  0% {
202
    transform: rotateX(0deg);
203
  }
204
  100% {
205
    transform: rotateX(360deg);
206
  }
207
}
 

Untitled

CSSDeck G+