Skip to content

Commit cb529d0

Browse files
lukehaaslukehaas
committed
Merge pull request lukehaas#12 from OxyDesign/step2
Improvement on loader 6
2 parents c3cd5db + cccf3f2 commit cb529d0

File tree

3 files changed

+109
-65
lines changed

3 files changed

+109
-65
lines changed

‎css/load6.css

Lines changed: 30 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -17,43 +17,55 @@
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;
2525
}
26-
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;
26+
10% {
27+
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;
2828
}
29-
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;
29+
25% {
30+
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;
31+
}
32+
40% {
33+
box-shadow: 0 -0.83em 0 -0.4em #ffffff, -0.377em -0.74em 0 -0.42em #ffffff, -0.645em -0.522em 0 -0.44em #ffffff, -0.775em -0.297em 0 -0.46em #ffffff, -0.82em -0.13em 0 -0.477em #ffffff;
34+
}
35+
60% {
36+
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.297em -0.775em 0 -0.477em #ffffff;
3137
}
3238
100% {
3339
-webkit-transform: rotate(360deg);
3440
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;
41+
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;
3642
}
3743
}
3844
@keyframes load6 {
3945
0% {
4046
-webkit-transform: rotate(0deg);
4147
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;
48+
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;
49+
}
50+
2%,
51+
96% {
52+
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;
53+
}
54+
10% {
55+
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;
4356
}
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;
57+
25% {
58+
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;
4759
}
48-
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;
60+
40% {
61+
box-shadow: 0 -0.83em 0 -0.4em #ffffff, -0.377em -0.74em 0 -0.42em #ffffff, -0.645em -0.522em 0 -0.44em #ffffff, -0.775em -0.297em 0 -0.46em #ffffff, -0.82em -0.13em 0 -0.477em #ffffff;
5062
}
51-
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;
63+
60% {
64+
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.297em -0.775em 0 -0.477em #ffffff;
5365
}
5466
100% {
5567
-webkit-transform: rotate(360deg);
5668
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;
69+
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;
5870
}
5971
}

‎index.html

Lines changed: 30 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -340,44 +340,56 @@
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;
348348
}
349-
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;
349+
10% {
350+
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;
351351
}
352-
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;
352+
25% {
353+
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;
354+
}
355+
40% {
356+
box-shadow: 0 -0.83em 0 -0.4em #ffffff, -0.377em -0.74em 0 -0.42em #ffffff, -0.645em -0.522em 0 -0.44em #ffffff, -0.775em -0.297em 0 -0.46em #ffffff, -0.82em -0.13em 0 -0.477em #ffffff;
357+
}
358+
60% {
359+
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.297em -0.775em 0 -0.477em #ffffff;
354360
}
355361
100% {
356362
-webkit-transform: rotate(360deg);
357363
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;
364+
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;
359365
}
360366
}
361367
@keyframes load6 {
362368
0% {
363369
-webkit-transform: rotate(0deg);
364370
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;
371+
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;
366372
}
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;
373+
2%,
374+
96% {
375+
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;
370376
}
371-
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;
377+
10% {
378+
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;
379+
}
380+
25% {
381+
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;
382+
}
383+
40% {
384+
box-shadow: 0 -0.83em 0 -0.4em #ffffff, -0.377em -0.74em 0 -0.42em #ffffff, -0.645em -0.522em 0 -0.44em #ffffff, -0.775em -0.297em 0 -0.46em #ffffff, -0.82em -0.13em 0 -0.477em #ffffff;
373385
}
374-
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;
386+
60% {
387+
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.297em -0.775em 0 -0.477em #ffffff;
376388
}
377389
100% {
378390
-webkit-transform: rotate(360deg);
379391
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;
392+
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;
381393
}
382394
}
383395
</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: 49 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -21,42 +21,62 @@
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;
3638
}
37-
38-
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;
39+
10% {
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;
46+
}
47+
25% {
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;
54+
}
55+
40% {
56+
box-shadow:
57+
0 -0.83em 0 -0.4em #FFF,
58+
-0.377em -0.740em 0 -0.42em #FFF,
59+
-0.645em -0.522em 0 -0.44em #FFF,
60+
-0.775em -0.297em 0 -0.46em #FFF,
61+
-0.820em -0.130em 0 -0.477em #FFF;
4462
}
45-
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;
63+
60% {
64+
box-shadow:
65+
0 -0.83em 0 -0.4em #FFF,
66+
-0.087em -0.825em 0 -0.42em #FFF,
67+
-0.173em -0.812em 0 -0.44em #FFF,
68+
-0.256em -0.789em 0 -0.46em #FFF,
69+
-0.297em -0.775em 0 -0.477em #FFF;
5170
}
5271
100% {
5372
-webkit-transform:rotate(360deg);
5473
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;
74+
box-shadow:
75+
0 -0.83em 0 -0.4em #FFF,
76+
0 -0.83em 0 -0.42em #FFF,
77+
0 -0.83em 0 -0.44em #FFF,
78+
0 -0.83em 0 -0.46em #FFF,
79+
0 -0.83em 0 -0.477em #FFF;
6080
}
6181
}
6282

0 commit comments

Comments
 (0)