-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathanimated.html
195 lines (172 loc) · 5.32 KB
/
animated.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="author" content="Espen Hovlandsdal (rexxars.com)">
<title>Animated "loading indicator" based on Imbo-logo</title>
<style>
.imbo-spinner {
width: 512px;
height: 512px;
position: relative;
}
.square {
width: 25%;
height: 25%;
}
.square, .imbo-text {
position: absolute;
}
.imbo-text {
width: 100%;
height: 25%;
}
.x0 { left: 0; }
.x1 { left: 25%; }
.x2 { left: 50%; }
.x3 { left: 75%; }
.y0 { top: 0; }
.y1 { top: 25%; }
.y2 { top: 50%; }
.y3 { top: 75%; }
.x2.y1, .x3.y3 { background: #19420c; }
.x0.y0, .x3.y0, .x1.y3 { background: #225d10; }
.x2.y0, .x1.y1, .x2.y3 { background: #95c400; }
.x1.y0, .x0.y1, .x3.y1, .x0.y3 { background: #588e00; }
.x1.y0 {
-webkit-animation-delay: 0.1s;
-moz-animation-delay: 0.1s;
-ms-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.x2.y0 {
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-ms-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.x3.y0 {
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
-ms-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.x0.y1 {
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
-ms-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.x1.y1 {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
-ms-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.x2.y1 {
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
-ms-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.x3.y1 {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
-ms-animation-delay: 0.7s;
animation-delay: 0.7s;
}
.x0.y3 {
-webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
-ms-animation-delay: 0.8s;
animation-delay: 0.8s;
}
.x1.y3 {
-webkit-animation-delay: 0.9s;
-moz-animation-delay: 0.9s;
-ms-animation-delay: 0.9s;
animation-delay: 0.9s;
}
.x2.y3 {
-webkit-animation-delay: 1.0s;
-moz-animation-delay: 1.0s;
-ms-animation-delay: 1.0s;
animation-delay: 1.0s;
}
.x3.y3 {
-webkit-animation-delay: 1.1s;
-moz-animation-delay: 1.1s;
-ms-animation-delay: 1.1s;
animation-delay: 1.1s;
}
@-webkit-keyframes fadeColors {
0% { background: #19420c; }
33% { background: #95c400; }
66% { background: #588e00; }
100% { background: #225d10; }
}
@-moz-keyframes fadeColors {
0% { background: #19420c; }
33% { background: #95c400; }
66% { background: #588e00; }
100% { background: #225d10; }
}
@-ms-keyframes fadeColors {
0% { background: #19420c; }
33% { background: #95c400; }
66% { background: #588e00; }
100% { background: #225d10; }
}
@keyframes fadeColors {
0% { background: #19420c; }
33% { background: #95c400; }
66% { background: #588e00; }
100% { background: #225d10; }
}
.square {
-webkit-animation: fadeColors 3.5s infinite ease-in-out;
-moz-animation: fadeColors 3.5s infinite ease-in-out;
-ms-animation: fadeColors 3.5s infinite ease-in-out;
animation: fadeColors 3.5s infinite ease-in-out;
}
</style>
</head>
<body>
<div class="imbo-spinner">
<div class="square x0 y0"></div>
<div class="square x1 y0"></div>
<div class="square x2 y0"></div>
<div class="square x3 y0"></div>
<div class="square x0 y1"></div>
<div class="square x1 y1"></div>
<div class="square x2 y1"></div>
<div class="square x3 y1"></div>
<svg class="imbo-text x0 y2" version="1.0" xmlns="http://www.w3.org/2000/svg"
width="512.000000pt" height="128.000000pt" viewBox="0 0 512.000000 128.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,128.000000) scale(0.100000,-0.100000)"
fill="#666" stroke="none">
<path d="M4200 936 c-159 -43 -250 -147 -250 -283 0 -85 24 -137 91 -197 79
-71 140 -91 284 -91 144 0 205 20 285 92 72 64 94 111 95 198 0 137 -90 239
-250 281 -62 17 -195 17 -255 0z m212 -172 c38 -19 71 -91 62 -131 -26 -108
-166 -147 -251 -69 -29 27 -36 41 -40 83 -5 45 -2 53 27 86 50 57 128 69 202
31z"/>
<path d="M470 655 l0 -285 115 0 115 0 0 285 0 285 -115 0 -115 0 0 -285z"/>
<path d="M1370 655 l0 -285 110 0 109 0 3 142 3 142 70 -89 c39 -49 75 -96 81
-104 9 -11 26 5 92 89 l82 103 0 -142 0 -141 115 0 115 0 0 285 0 285 -120 0
-120 0 -73 -99 c-39 -55 -74 -100 -77 -100 -3 0 -38 44 -78 99 l-73 100 -119
0 -120 0 0 -285z"/>
<path d="M2720 654 l0 -286 253 4 c240 3 254 4 305 27 137 62 130 211 -13 258
l-30 10 41 21 c53 27 74 60 74 116 0 36 -6 50 -31 75 -52 52 -104 61 -366 61
l-233 0 0 -286z m390 128 c47 -38 -17 -77 -115 -70 -47 3 -50 5 -53 31 -6 51
1 57 77 57 51 0 74 -5 91 -18z m11 -192 c11 -6 19 -21 19 -36 0 -33 -35 -46
-124 -42 l-71 3 -3 43 -3 42 81 0 c45 0 90 -5 101 -10z"/>
</g>
</svg>
<div class="square x0 y3"></div>
<div class="square x1 y3"></div>
<div class="square x2 y3"></div>
<div class="square x3 y3"></div>
</div>
</body>
</html>