Skip to content

Commit 1c1af52

Browse files
OxyDesignOxyDesign
committed
Improvement on loader 6
1 parent c3cd5db commit 1c1af52

File tree

3 files changed

+83
-55
lines changed

3 files changed

+83
-55
lines changed

‎css/load6.css‎

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -17,43 +17,51 @@
1717
0% {
1818
-webkit-transform: rotate(0deg);
1919
transform: rotate(0deg);
20-
box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0 -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0 -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff;
20+
box-shadow: 0 -0.83em 0 -0.4em #ffffff, 0 -0.83em 0 -0.42em #ffffff, 0 -0.83em 0 -0.44em #ffffff, 0 -0.83em 0 -0.46em #ffffff, 0 -0.83em 0 -0.477em #ffffff;
2121
}
22-
5%,
23-
95% {
24-
box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0 -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0 -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff;
22+
2%,
23+
96% {
24+
box-shadow: 0 -0.83em 0 -0.4em #ffffff, 0 -0.83em 0 -0.42em #ffffff, 0 -0.83em 0 -0.44em #ffffff, 0 -0.83em 0 -0.46em #ffffff, 0 -0.83em 0 -0.477em #ffffff;
25+
}
26+
10%,
27+
70% {
28+
box-shadow: 0 -0.83em 0 -0.4em #ffffff, -0.087em -0.825em 0 -0.42em #ffffff, -0.173em -0.812em 0 -0.44em #ffffff, -0.256em -0.789em 0 -0.46em #ffffff, -0.338em -0.758em 0 -0.477em #ffffff;
2529
}
2630
30% {
27-
box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.51em -0.66em 0 -0.42em #ffffff, -0.75em -0.36em 0 -0.44em #ffffff, -0.83em -0.03em 0 -0.46em #ffffff, -0.81em 0.21em 0 -0.477em #ffffff;
31+
box-shadow: 0 -0.83em 0 -0.4em #ffffff, -0.338em -0.758em 0 -0.42em #ffffff, -0.555em -0.617em 0 -0.44em #ffffff, -0.671em -0.488em 0 -0.46em #ffffff, -0.719em -0.415em 0 -0.477em #ffffff;
2832
}
2933
55% {
30-
box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.29em -0.78em 0 -0.42em #ffffff, -0.43em -0.72em 0 -0.44em #ffffff, -0.52em -0.65em 0 -0.46em #ffffff, -0.57em -0.61em 0 -0.477em #ffffff;
34+
box-shadow: 0 -0.83em 0 -0.4em #ffffff, -0.256em -0.789em 0 -0.42em #ffffff, -0.488em -0.671em 0 -0.44em #ffffff, -0.617em -0.555em 0 -0.46em #ffffff, -0.671em -0.488em 0 -0.477em #ffffff;
3135
}
3236
100% {
3337
-webkit-transform: rotate(360deg);
3438
transform: rotate(360deg);
35-
box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0 -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0 -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff;
39+
box-shadow: 0 -0.83em 0 -0.4em #ffffff, 0 -0.83em 0 -0.42em #ffffff, 0 -0.83em 0 -0.44em #ffffff, 0 -0.83em 0 -0.46em #ffffff, 0 -0.83em 0 -0.477em #ffffff;
3640
}
3741
}
3842
@keyframes load6 {
3943
0% {
4044
-webkit-transform: rotate(0deg);
4145
transform: rotate(0deg);
42-
box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0 -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0 -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff;
46+
box-shadow: 0 -0.83em 0 -0.4em #ffffff, 0 -0.83em 0 -0.42em #ffffff, 0 -0.83em 0 -0.44em #ffffff, 0 -0.83em 0 -0.46em #ffffff, 0 -0.83em 0 -0.477em #ffffff;
47+
}
48+
2%,
49+
96% {
50+
box-shadow: 0 -0.83em 0 -0.4em #ffffff, 0 -0.83em 0 -0.42em #ffffff, 0 -0.83em 0 -0.44em #ffffff, 0 -0.83em 0 -0.46em #ffffff, 0 -0.83em 0 -0.477em #ffffff;
4351
}
44-
5%,
45-
95% {
46-
box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0 -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0 -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff;
52+
10%,
53+
70% {
54+
box-shadow: 0 -0.83em 0 -0.4em #ffffff, -0.087em -0.825em 0 -0.42em #ffffff, -0.173em -0.812em 0 -0.44em #ffffff, -0.256em -0.789em 0 -0.46em #ffffff, -0.338em -0.758em 0 -0.477em #ffffff;
4755
}
4856
30% {
49-
box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.51em -0.66em 0 -0.42em #ffffff, -0.75em -0.36em 0 -0.44em #ffffff, -0.83em -0.03em 0 -0.46em #ffffff, -0.81em 0.21em 0 -0.477em #ffffff;
57+
box-shadow: 0 -0.83em 0 -0.4em #ffffff, -0.338em -0.758em 0 -0.42em #ffffff, -0.555em -0.617em 0 -0.44em #ffffff, -0.671em -0.488em 0 -0.46em #ffffff, -0.719em -0.415em 0 -0.477em #ffffff;
5058
}
5159
55% {
52-
box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.29em -0.78em 0 -0.42em #ffffff, -0.43em -0.72em 0 -0.44em #ffffff, -0.52em -0.65em 0 -0.46em #ffffff, -0.57em -0.61em 0 -0.477em #ffffff;
60+
box-shadow: 0 -0.83em 0 -0.4em #ffffff, -0.256em -0.789em 0 -0.42em #ffffff, -0.488em -0.671em 0 -0.44em #ffffff, -0.617em -0.555em 0 -0.46em #ffffff, -0.671em -0.488em 0 -0.477em #ffffff;
5361
}
5462
100% {
5563
-webkit-transform: rotate(360deg);
5664
transform: rotate(360deg);
57-
box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0 -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0 -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff;
65+
box-shadow: 0 -0.83em 0 -0.4em #ffffff, 0 -0.83em 0 -0.42em #ffffff, 0 -0.83em 0 -0.44em #ffffff, 0 -0.83em 0 -0.46em #ffffff, 0 -0.83em 0 -0.477em #ffffff;
5866
}
5967
}

‎index.html‎

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -340,44 +340,52 @@
340340
0% {
341341
-webkit-transform: rotate(0deg);
342342
transform: rotate(0deg);
343-
box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0 -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0 -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff;
343+
box-shadow: 0 -0.83em 0 -0.4em #ffffff, 0 -0.83em 0 -0.42em #ffffff, 0 -0.83em 0 -0.44em #ffffff, 0 -0.83em 0 -0.46em #ffffff, 0 -0.83em 0 -0.477em #ffffff;
344344
}
345-
5%,
346-
95% {
347-
box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0 -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0 -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff;
345+
2%,
346+
96% {
347+
box-shadow: 0 -0.83em 0 -0.4em #ffffff, 0 -0.83em 0 -0.42em #ffffff, 0 -0.83em 0 -0.44em #ffffff, 0 -0.83em 0 -0.46em #ffffff, 0 -0.83em 0 -0.477em #ffffff;
348+
}
349+
10%,
350+
70% {
351+
box-shadow: 0 -0.83em 0 -0.4em #ffffff, -0.087em -0.825em 0 -0.42em #ffffff, -0.173em -0.812em 0 -0.44em #ffffff, -0.256em -0.789em 0 -0.46em #ffffff, -0.338em -0.758em 0 -0.477em #ffffff;
348352
}
349353
30% {
350-
box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.51em -0.66em 0 -0.42em #ffffff, -0.75em -0.36em 0 -0.44em #ffffff, -0.83em -0.03em 0 -0.46em #ffffff, -0.81em 0.21em 0 -0.477em #ffffff;
354+
box-shadow: 0 -0.83em 0 -0.4em #ffffff, -0.338em -0.758em 0 -0.42em #ffffff, -0.555em -0.617em 0 -0.44em #ffffff, -0.671em -0.488em 0 -0.46em #ffffff, -0.719em -0.415em 0 -0.477em #ffffff;
351355
}
352356
55% {
353-
box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.29em -0.78em 0 -0.42em #ffffff, -0.43em -0.72em 0 -0.44em #ffffff, -0.52em -0.65em 0 -0.46em #ffffff, -0.57em -0.61em 0 -0.477em #ffffff;
357+
box-shadow: 0 -0.83em 0 -0.4em #ffffff, -0.256em -0.789em 0 -0.42em #ffffff, -0.488em -0.671em 0 -0.44em #ffffff, -0.617em -0.555em 0 -0.46em #ffffff, -0.671em -0.488em 0 -0.477em #ffffff;
354358
}
355359
100% {
356360
-webkit-transform: rotate(360deg);
357361
transform: rotate(360deg);
358-
box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0 -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0 -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff;
362+
box-shadow: 0 -0.83em 0 -0.4em #ffffff, 0 -0.83em 0 -0.42em #ffffff, 0 -0.83em 0 -0.44em #ffffff, 0 -0.83em 0 -0.46em #ffffff, 0 -0.83em 0 -0.477em #ffffff;
359363
}
360364
}
361365
@keyframes load6 {
362366
0% {
363367
-webkit-transform: rotate(0deg);
364368
transform: rotate(0deg);
365-
box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0 -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0 -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff;
369+
box-shadow: 0 -0.83em 0 -0.4em #ffffff, 0 -0.83em 0 -0.42em #ffffff, 0 -0.83em 0 -0.44em #ffffff, 0 -0.83em 0 -0.46em #ffffff, 0 -0.83em 0 -0.477em #ffffff;
370+
}
371+
2%,
372+
96% {
373+
box-shadow: 0 -0.83em 0 -0.4em #ffffff, 0 -0.83em 0 -0.42em #ffffff, 0 -0.83em 0 -0.44em #ffffff, 0 -0.83em 0 -0.46em #ffffff, 0 -0.83em 0 -0.477em #ffffff;
366374
}
367-
5%,
368-
95% {
369-
box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0 -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0 -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff;
375+
10%,
376+
70% {
377+
box-shadow: 0 -0.83em 0 -0.4em #ffffff, -0.087em -0.825em 0 -0.42em #ffffff, -0.173em -0.812em 0 -0.44em #ffffff, -0.256em -0.789em 0 -0.46em #ffffff, -0.338em -0.758em 0 -0.477em #ffffff;
370378
}
371379
30% {
372-
box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.51em -0.66em 0 -0.42em #ffffff, -0.75em -0.36em 0 -0.44em #ffffff, -0.83em -0.03em 0 -0.46em #ffffff, -0.81em 0.21em 0 -0.477em #ffffff;
380+
box-shadow: 0 -0.83em 0 -0.4em #ffffff, -0.338em -0.758em 0 -0.42em #ffffff, -0.555em -0.617em 0 -0.44em #ffffff, -0.671em -0.488em 0 -0.46em #ffffff, -0.719em -0.415em 0 -0.477em #ffffff;
373381
}
374382
55% {
375-
box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.29em -0.78em 0 -0.42em #ffffff, -0.43em -0.72em 0 -0.44em #ffffff, -0.52em -0.65em 0 -0.46em #ffffff, -0.57em -0.61em 0 -0.477em #ffffff;
383+
box-shadow: 0 -0.83em 0 -0.4em #ffffff, -0.256em -0.789em 0 -0.42em #ffffff, -0.488em -0.671em 0 -0.44em #ffffff, -0.617em -0.555em 0 -0.46em #ffffff, -0.671em -0.488em 0 -0.477em #ffffff;
376384
}
377385
100% {
378386
-webkit-transform: rotate(360deg);
379387
transform: rotate(360deg);
380-
box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0 -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0 -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff;
388+
box-shadow: 0 -0.83em 0 -0.4em #ffffff, 0 -0.83em 0 -0.42em #ffffff, 0 -0.83em 0 -0.44em #ffffff, 0 -0.83em 0 -0.46em #ffffff, 0 -0.83em 0 -0.477em #ffffff;
381389
}
382390
}
383391
</textarea></div><div id="load7" class="source hidden"><textarea readonly class="markup"><div class="loader">Loading...</div></textarea><textarea readonly class="css">.load7 .loader:before,

‎less/load6.less‎

Lines changed: 39 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -21,42 +21,54 @@
2121
0% {
2222
-webkit-transform:rotate(0deg);
2323
transform:rotate(0deg);
24-
box-shadow:-0.11em -0.83em 0 -0.4em #FFF,
25-
-0.11em -0.83em 0 -0.42em #FFF,
26-
-0.11em -0.83em 0 -0.44em #FFF,
27-
-0.11em -0.83em 0 -0.46em #FFF,
28-
-0.11em -0.83em 0 -0.477em #FFF;
24+
box-shadow:
25+
0 -0.83em 0 -0.4em #FFF,
26+
0 -0.83em 0 -0.42em #FFF,
27+
0 -0.83em 0 -0.44em #FFF,
28+
0 -0.83em 0 -0.46em #FFF,
29+
0 -0.83em 0 -0.477em #FFF;
2930
}
30-
5%,95% {
31-
box-shadow:-0.11em -0.83em 0 -0.4em #FFF,
32-
-0.11em -0.83em 0 -0.42em #FFF,
33-
-0.11em -0.83em 0 -0.44em #FFF,
34-
-0.11em -0.83em 0 -0.46em #FFF,
35-
-0.11em -0.83em 0 -0.477em #FFF;
31+
2%,96% {
32+
box-shadow:
33+
0 -0.83em 0 -0.4em #FFF,
34+
0 -0.83em 0 -0.42em #FFF,
35+
0 -0.83em 0 -0.44em #FFF,
36+
0 -0.83em 0 -0.46em #FFF,
37+
0 -0.83em 0 -0.477em #FFF;
38+
}
39+
10%,70% {
40+
box-shadow:
41+
0 -0.83em 0 -0.4em #FFF,
42+
-0.087em -0.825em 0 -0.42em #FFF,
43+
-0.173em -0.812em 0 -0.44em #FFF,
44+
-0.256em -0.789em 0 -0.46em #FFF,
45+
-0.338em -0.758em 0 -0.477em #FFF;
3646
}
37-
3847
30% {
39-
box-shadow:-0.11em -0.83em 0 -0.4em #FFF,
40-
-0.51em -0.66em 0 -0.42em #FFF,
41-
-0.75em -0.36em 0 -0.44em #FFF,
42-
-0.83em -0.03em 0 -0.46em #FFF,
43-
-0.81em 0.21em 0 -0.477em #FFF;
48+
box-shadow:
49+
0 -0.83em 0 -0.4em #FFF,
50+
-0.338em -0.758em 0 -0.42em #FFF,
51+
-0.555em -0.617em 0 -0.44em #FFF,
52+
-0.671em -0.488em 0 -0.46em #FFF,
53+
-0.719em -0.415em 0 -0.477em #FFF;
4454
}
4555
55% {
46-
box-shadow:-0.11em -0.83em 0 -0.4em #FFF,
47-
-0.29em -0.78em 0 -0.42em #FFF,
48-
-0.43em -0.72em 0 -0.44em #FFF,
49-
-0.52em -0.65em 0 -0.46em #FFF,
50-
-0.57em -0.61em 0 -0.477em #FFF;
56+
box-shadow:
57+
0 -0.83em 0 -0.4em #FFF,
58+
-0.256em -0.789em 0 -0.42em #FFF,
59+
-0.488em -0.671em 0 -0.44em #FFF,
60+
-0.617em -0.555em 0 -0.46em #FFF,
61+
-0.671em -0.488em 0 -0.477em #FFF;
5162
}
5263
100% {
5364
-webkit-transform:rotate(360deg);
5465
transform:rotate(360deg);
55-
box-shadow:-0.11em -0.83em 0 -0.4em #FFF,
56-
-0.11em -0.83em 0 -0.42em #FFF,
57-
-0.11em -0.83em 0 -0.44em #FFF,
58-
-0.11em -0.83em 0 -0.46em #FFF,
59-
-0.11em -0.83em 0 -0.477em #FFF;
66+
box-shadow:
67+
0 -0.83em 0 -0.4em #FFF,
68+
0 -0.83em 0 -0.42em #FFF,
69+
0 -0.83em 0 -0.44em #FFF,
70+
0 -0.83em 0 -0.46em #FFF,
71+
0 -0.83em 0 -0.477em #FFF;
6072
}
6173
}
6274

0 commit comments

Comments
 (0)