Skip to content

Commit 5d3a4d4

Browse files
lukehaaslukehaas
committed
tweaks plus added colour variables and tidied the branch
1 parent 126bb3b commit 5d3a4d4

22 files changed

+603
-329
lines changed

‎.gitignore‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,7 @@
11
node_modules/
2+
css/
3+
images/
4+
index.html
5+
jade/
6+
script/
7+
less/main.less

‎css/load1.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.load1 .loader,
22
.load1 .loader:before,
33
.load1 .loader:after {
4-
background: #FFF;
4+
background: #ffffff;
55
-webkit-animation: load1 1s infinite ease-in-out;
66
animation: load1 1s infinite ease-in-out;
77
width: 1em;
@@ -20,7 +20,7 @@
2020
}
2121
.load1 .loader {
2222
text-indent: -9999em;
23-
margin: 8em auto;
23+
margin: 88px auto;
2424
position: relative;
2525
font-size: 11px;
2626
-webkit-transform: translateZ(0);
@@ -36,7 +36,7 @@
3636
0%,
3737
80%,
3838
100% {
39-
box-shadow: 0 0 #FFF;
39+
box-shadow: 0 0 #ffffff;
4040
height: 4em;
4141
}
4242
40% {
@@ -48,7 +48,7 @@
4848
0%,
4949
80%,
5050
100% {
51-
box-shadow: 0 0 #FFF;
51+
box-shadow: 0 0 #ffffff;
5252
height: 4em;
5353
}
5454
40% {

‎css/load2.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
.load2 .loader:before {
1212
width: 5.2em;
1313
height: 10.2em;
14-
background: #0dcecb;
14+
background: #0dc5c1;
1515
border-radius: 10.2em 0 0 10.2em;
1616
top: -0.1em;
1717
left: -0.1em;
@@ -23,19 +23,19 @@
2323
.load2 .loader {
2424
font-size: 11px;
2525
text-indent: -99999em;
26-
margin: 5em auto;
26+
margin: 55px auto;
2727
position: relative;
2828
width: 10em;
2929
height: 10em;
30-
box-shadow: inset 0 0 0 1em #FFF;
30+
box-shadow: inset 0 0 0 1em #ffffff;
3131
-webkit-transform: translateZ(0);
3232
-ms-transform: translateZ(0);
3333
transform: translateZ(0);
3434
}
3535
.load2 .loader:after {
3636
width: 5.2em;
3737
height: 10.2em;
38-
background: #0dcecb;
38+
background: #0dc5c1;
3939
border-radius: 0 10.2em 10.2em 0;
4040
top: -0.1em;
4141
left: 5.1em;

‎css/load3.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.load3 .loader {
22
font-size: 10px;
3-
margin: 5em auto;
3+
margin: 50px auto;
44
text-indent: -9999em;
55
width: 11em;
66
height: 11em;
@@ -21,15 +21,15 @@
2121
.load3 .loader:before {
2222
width: 50%;
2323
height: 50%;
24-
background: #FFF;
24+
background: #ffffff;
2525
border-radius: 100% 0 0 0;
2626
position: absolute;
2727
top: 0;
2828
left: 0;
2929
content: '';
3030
}
3131
.load3 .loader:after {
32-
background: #0dcecb;
32+
background: #0dc5c1;
3333
width: 75%;
3434
height: 75%;
3535
border-radius: 50%;

‎css/load4.css‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.load4 .loader {
22
font-size: 20px;
3-
margin: 5em auto;
3+
margin: 100px auto;
44
width: 1em;
55
height: 1em;
66
border-radius: 50%;
@@ -15,54 +15,54 @@
1515
@-webkit-keyframes load4 {
1616
0%,
1717
100% {
18-
box-shadow: 0em -3em 0em 0.2em #ffffff, 2em -2em 0 0em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 0em #ffffff;
18+
box-shadow: 0 -3em 0 0.2em #ffffff, 2em -2em 0 0em #ffffff, 3em 0 0 -1em #ffffff, 2em 2em 0 -1em #ffffff, 0 3em 0 -1em #ffffff, -2em 2em 0 -1em #ffffff, -3em 0 0 -1em #ffffff, -2em -2em 0 0 #ffffff;
1919
}
2020
12.5% {
21-
box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 0.2em #ffffff, 3em 0em 0 0em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
21+
box-shadow: 0 -3em 0 0 #ffffff, 2em -2em 0 0.2em #ffffff, 3em 0 0 0 #ffffff, 2em 2em 0 -1em #ffffff, 0 3em 0 -1em #ffffff, -2em 2em 0 -1em #ffffff, -3em 0 0 -1em #ffffff, -2em -2em 0 -1em #ffffff;
2222
}
2323
25% {
24-
box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 0em #ffffff, 3em 0em 0 0.2em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
24+
box-shadow: 0 -3em 0 -0.5em #ffffff, 2em -2em 0 0 #ffffff, 3em 0 0 0.2em #ffffff, 2em 2em 0 0 #ffffff, 0 3em 0 -1em #ffffff, -2em 2em 0 -1em #ffffff, -3em 0 0 -1em #ffffff, -2em -2em 0 -1em #ffffff;
2525
}
2626
37.5% {
27-
box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 0em #ffffff, 2em 2em 0 0.2em #ffffff, 0em 3em 0 0em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
27+
box-shadow: 0 -3em 0 -1em #ffffff, 2em -2em 0 -1em #ffffff, 3em 0em 0 0 #ffffff, 2em 2em 0 0.2em #ffffff, 0 3em 0 0em #ffffff, -2em 2em 0 -1em #ffffff, -3em 0em 0 -1em #ffffff, -2em -2em 0 -1em #ffffff;
2828
}
2929
50% {
30-
box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 0.2em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
30+
box-shadow: 0 -3em 0 -1em #ffffff, 2em -2em 0 -1em #ffffff, 3em 0 0 -1em #ffffff, 2em 2em 0 0em #ffffff, 0 3em 0 0.2em #ffffff, -2em 2em 0 0 #ffffff, -3em 0em 0 -1em #ffffff, -2em -2em 0 -1em #ffffff;
3131
}
3232
62.5% {
33-
box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 0em #ffffff, -2em 2em 0 0.2em #ffffff, -3em 0em 0 0em #ffffff, -2em -2em 0 -0.5em #ffffff;
33+
box-shadow: 0 -3em 0 -1em #ffffff, 2em -2em 0 -1em #ffffff, 3em 0 0 -1em #ffffff, 2em 2em 0 -1em #ffffff, 0 3em 0 0 #ffffff, -2em 2em 0 0.2em #ffffff, -3em 0 0 0 #ffffff, -2em -2em 0 -1em #ffffff;
3434
}
3535
75% {
36-
box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0.2em #ffffff, -2em -2em 0 0em #ffffff;
36+
box-shadow: 0em -3em 0 -1em #ffffff, 2em -2em 0 -1em #ffffff, 3em 0em 0 -1em #ffffff, 2em 2em 0 -1em #ffffff, 0 3em 0 -1em #ffffff, -2em 2em 0 0 #ffffff, -3em 0em 0 0.2em #ffffff, -2em -2em 0 0 #ffffff;
3737
}
3838
87.5% {
39-
box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0em #ffffff, -2em -2em 0 0.2em #ffffff;
39+
box-shadow: 0em -3em 0 0 #ffffff, 2em -2em 0 -1em #ffffff, 3em 0 0 -1em #ffffff, 2em 2em 0 -1em #ffffff, 0 3em 0 -1em #ffffff, -2em 2em 0 0 #ffffff, -3em 0em 0 0 #ffffff, -2em -2em 0 0.2em #ffffff;
4040
}
4141
}
4242
@keyframes load4 {
4343
0%,
4444
100% {
45-
box-shadow: 0em -3em 0em 0.2em #ffffff, 2em -2em 0 0em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 0em #ffffff;
45+
box-shadow: 0 -3em 0 0.2em #ffffff, 2em -2em 0 0em #ffffff, 3em 0 0 -1em #ffffff, 2em 2em 0 -1em #ffffff, 0 3em 0 -1em #ffffff, -2em 2em 0 -1em #ffffff, -3em 0 0 -1em #ffffff, -2em -2em 0 0 #ffffff;
4646
}
4747
12.5% {
48-
box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 0.2em #ffffff, 3em 0em 0 0em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
48+
box-shadow: 0 -3em 0 0 #ffffff, 2em -2em 0 0.2em #ffffff, 3em 0 0 0 #ffffff, 2em 2em 0 -1em #ffffff, 0 3em 0 -1em #ffffff, -2em 2em 0 -1em #ffffff, -3em 0 0 -1em #ffffff, -2em -2em 0 -1em #ffffff;
4949
}
5050
25% {
51-
box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 0em #ffffff, 3em 0em 0 0.2em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
51+
box-shadow: 0 -3em 0 -0.5em #ffffff, 2em -2em 0 0 #ffffff, 3em 0 0 0.2em #ffffff, 2em 2em 0 0 #ffffff, 0 3em 0 -1em #ffffff, -2em 2em 0 -1em #ffffff, -3em 0 0 -1em #ffffff, -2em -2em 0 -1em #ffffff;
5252
}
5353
37.5% {
54-
box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 0em #ffffff, 2em 2em 0 0.2em #ffffff, 0em 3em 0 0em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
54+
box-shadow: 0 -3em 0 -1em #ffffff, 2em -2em 0 -1em #ffffff, 3em 0em 0 0 #ffffff, 2em 2em 0 0.2em #ffffff, 0 3em 0 0em #ffffff, -2em 2em 0 -1em #ffffff, -3em 0em 0 -1em #ffffff, -2em -2em 0 -1em #ffffff;
5555
}
5656
50% {
57-
box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 0.2em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
57+
box-shadow: 0 -3em 0 -1em #ffffff, 2em -2em 0 -1em #ffffff, 3em 0 0 -1em #ffffff, 2em 2em 0 0em #ffffff, 0 3em 0 0.2em #ffffff, -2em 2em 0 0 #ffffff, -3em 0em 0 -1em #ffffff, -2em -2em 0 -1em #ffffff;
5858
}
5959
62.5% {
60-
box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 0em #ffffff, -2em 2em 0 0.2em #ffffff, -3em 0em 0 0em #ffffff, -2em -2em 0 -0.5em #ffffff;
60+
box-shadow: 0 -3em 0 -1em #ffffff, 2em -2em 0 -1em #ffffff, 3em 0 0 -1em #ffffff, 2em 2em 0 -1em #ffffff, 0 3em 0 0 #ffffff, -2em 2em 0 0.2em #ffffff, -3em 0 0 0 #ffffff, -2em -2em 0 -1em #ffffff;
6161
}
6262
75% {
63-
box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0.2em #ffffff, -2em -2em 0 0em #ffffff;
63+
box-shadow: 0em -3em 0 -1em #ffffff, 2em -2em 0 -1em #ffffff, 3em 0em 0 -1em #ffffff, 2em 2em 0 -1em #ffffff, 0 3em 0 -1em #ffffff, -2em 2em 0 0 #ffffff, -3em 0em 0 0.2em #ffffff, -2em -2em 0 0 #ffffff;
6464
}
6565
87.5% {
66-
box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0em #ffffff, -2em -2em 0 0.2em #ffffff;
66+
box-shadow: 0em -3em 0 0 #ffffff, 2em -2em 0 -1em #ffffff, 3em 0 0 -1em #ffffff, 2em 2em 0 -1em #ffffff, 0 3em 0 -1em #ffffff, -2em 2em 0 0 #ffffff, -3em 0em 0 0 #ffffff, -2em -2em 0 0.2em #ffffff;
6767
}
6868
}

‎css/load5.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.load5 .loader {
2-
margin: 4em auto;
2+
margin: 100px auto;
33
font-size: 25px;
44
width: 1em;
55
height: 1em;

‎css/load6.css‎

Lines changed: 73 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
.load6 .loader {
2-
font-size: 90px;
2+
font-size: 10px;
33
text-indent: -9999em;
44
overflow: hidden;
5-
width: 1em;
6-
height: 1em;
5+
width: 9em;
6+
height: 9em;
77
border-radius: 50%;
8-
margin: 0.8em auto;
8+
margin: 72px auto;
99
position: relative;
1010
-webkit-transform: translateZ(0);
1111
-ms-transform: translateZ(0);
@@ -17,51 +17,108 @@
1717
0% {
1818
-webkit-transform: rotate(0deg);
1919
transform: rotate(0deg);
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;
20+
box-shadow: 0 -7.5115em 0 -3.62em #ffffff, 0 -7.5115em 0 -3.801em #ffffff, 0 -7.5115em 0 -3.982em #ffffff, 0 -7.5115em 0 -4.163em #ffffff, 0 -7.5115em 0 -4.31685em #ffffff;
2121
}
2222
5%,
2323
95% {
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;
24+
box-shadow: 0 -7.5115em 0 -3.62em #ffffff, 0 -7.5115em 0 -3.801em #ffffff, 0 -7.5115em 0 -3.982em #ffffff, 0 -7.5115em 0 -4.163em #ffffff, 0 -7.5115em 0 -4.31685em #ffffff;
2525
}
2626
10%,
2727
59% {
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.297em -0.775em 0 -0.477em #ffffff;
28+
box-shadow: 0 -7.5115em 0 -3.62em #ffffff, -0.78735em -7.46625em 0 -3.801em #ffffff, -1.56565em -7.3486em 0 -3.982em #ffffff, -2.3168em -7.14045em 0 -4.163em #ffffff, -2.68785em -7.01375em 0 -4.31685em #ffffff;
2929
}
3030
20% {
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.749em -0.34em 0 -0.477em #ffffff;
31+
box-shadow: 0 -7.5115em 0 -3.62em #ffffff, -3.0589em -6.8599em 0 -3.801em #ffffff, -5.02275em -5.58385em 0 -3.982em #ffffff, -6.07255em -4.4164em 0 -4.163em #ffffff, -6.77845em -3.077em 0 -4.31685em #ffffff;
3232
}
3333
38% {
34-
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.09em 0 -0.477em #ffffff;
34+
box-shadow: 0 -7.5115em 0 -3.62em #ffffff, -3.41185em -6.697em 0 -3.801em #ffffff, -5.83725em -4.7241em 0 -3.982em #ffffff, -7.01375em -2.68785em 0 -4.163em #ffffff, -7.421em -0.8145em 0 -4.31685em #ffffff;
3535
}
3636
100% {
3737
-webkit-transform: rotate(360deg);
3838
transform: rotate(360deg);
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;
39+
box-shadow: 0 -7.5115em 0 -3.62em #ffffff, 0 -7.5115em 0 -3.801em #ffffff, 0 -7.5115em 0 -3.982em #ffffff, 0 -7.5115em 0 -4.163em #ffffff, 0 -7.5115em 0 -4.31685em #ffffff;
4040
}
4141
}
4242
@keyframes load6 {
4343
0% {
4444
-webkit-transform: rotate(0deg);
4545
transform: rotate(0deg);
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;
46+
box-shadow: 0 -7.5115em 0 -3.62em #ffffff, 0 -7.5115em 0 -3.801em #ffffff, 0 -7.5115em 0 -3.982em #ffffff, 0 -7.5115em 0 -4.163em #ffffff, 0 -7.5115em 0 -4.31685em #ffffff;
4747
}
4848
5%,
4949
95% {
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;
50+
box-shadow: 0 -7.5115em 0 -3.62em #ffffff, 0 -7.5115em 0 -3.801em #ffffff, 0 -7.5115em 0 -3.982em #ffffff, 0 -7.5115em 0 -4.163em #ffffff, 0 -7.5115em 0 -4.31685em #ffffff;
5151
}
5252
10%,
5353
59% {
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.297em -0.775em 0 -0.477em #ffffff;
54+
box-shadow: 0 -7.5115em 0 -3.62em #ffffff, -0.78735em -7.46625em 0 -3.801em #ffffff, -1.56565em -7.3486em 0 -3.982em #ffffff, -2.3168em -7.14045em 0 -4.163em #ffffff, -2.68785em -7.01375em 0 -4.31685em #ffffff;
5555
}
5656
20% {
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.749em -0.34em 0 -0.477em #ffffff;
57+
box-shadow: 0 -7.5115em 0 -3.62em #ffffff, -3.0589em -6.8599em 0 -3.801em #ffffff, -5.02275em -5.58385em 0 -3.982em #ffffff, -6.07255em -4.4164em 0 -4.163em #ffffff, -6.77845em -3.077em 0 -4.31685em #ffffff;
5858
}
5959
38% {
60-
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.09em 0 -0.477em #ffffff;
60+
box-shadow: 0 -7.5115em 0 -3.62em #ffffff, -3.41185em -6.697em 0 -3.801em #ffffff, -5.83725em -4.7241em 0 -3.982em #ffffff, -7.01375em -2.68785em 0 -4.163em #ffffff, -7.421em -0.8145em 0 -4.31685em #ffffff;
6161
}
6262
100% {
6363
-webkit-transform: rotate(360deg);
6464
transform: rotate(360deg);
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;
65+
box-shadow: 0 -7.5115em 0 -3.62em #ffffff, 0 -7.5115em 0 -3.801em #ffffff, 0 -7.5115em 0 -3.982em #ffffff, 0 -7.5115em 0 -4.163em #ffffff, 0 -7.5115em 0 -4.31685em #ffffff;
6666
}
6767
}
68+
/*
69+
.load6-frames() {
70+
0% {
71+
-webkit-transform:rotate(0deg);
72+
transform:rotate(0deg);
73+
box-shadow:
74+
0 -0.83em 0 -0.4em @foreground,
75+
0 -0.83em 0 -0.42em @foreground,
76+
0 -0.83em 0 -0.44em @foreground,
77+
0 -0.83em 0 -0.46em @foreground,
78+
0 -0.83em 0 -0.477em @foreground;
79+
}
80+
5%, 95% {
81+
box-shadow:
82+
0 -0.83em 0 -0.4em @foreground,
83+
0 -0.83em 0 -0.42em @foreground,
84+
0 -0.83em 0 -0.44em @foreground,
85+
0 -0.83em 0 -0.46em @foreground,
86+
0 -0.83em 0 -0.477em @foreground;
87+
}
88+
10%,
89+
59% {
90+
box-shadow:
91+
0 -0.83em 0 -0.4em @foreground,
92+
-0.087em -0.825em 0 -0.42em @foreground,
93+
-0.173em -0.812em 0 -0.44em @foreground,
94+
-0.256em -0.789em 0 -0.46em @foreground,
95+
-0.297em -0.775em 0 -0.477em @foreground;
96+
}
97+
20% {
98+
box-shadow:
99+
0 -0.83em 0 -0.4em @foreground,
100+
-0.338em -0.758em 0 -0.42em @foreground,
101+
-0.555em -0.617em 0 -0.44em @foreground,
102+
-0.671em -0.488em 0 -0.46em @foreground,
103+
-0.749em -0.34em 0 -0.477em @foreground;
104+
}
105+
38% {
106+
box-shadow:
107+
0 -0.83em 0 -0.4em @foreground,
108+
-0.377em -0.74em 0 -0.42em @foreground,
109+
-0.645em -0.522em 0 -0.44em @foreground,
110+
-0.775em -0.297em 0 -0.46em @foreground,
111+
-0.82em -0.09em 0 -0.477em @foreground;
112+
}
113+
100% {
114+
-webkit-transform:rotate(360deg);
115+
transform:rotate(360deg);
116+
box-shadow:
117+
0 -0.83em 0 -0.4em @foreground,
118+
0 -0.83em 0 -0.42em @foreground,
119+
0 -0.83em 0 -0.44em @foreground,
120+
0 -0.83em 0 -0.46em @foreground,
121+
0 -0.83em 0 -0.477em @foreground;
122+
}
123+
}*/
124+
/*9.05*/

‎css/load7.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010
animation: load7 1.8s infinite ease-in-out;
1111
}
1212
.load7 .loader {
13-
margin: 8em auto;
1413
font-size: 10px;
14+
margin: 80px auto;
1515
position: relative;
1616
text-indent: -9999em;
1717
-webkit-transform: translateZ(0);
@@ -29,7 +29,7 @@
2929
left: 3.5em;
3030
}
3131
.load7 .loader:before,
32-
.loader:after {
32+
.load7 .loader:after {
3333
content: '';
3434
position: absolute;
3535
top: 0;
@@ -41,7 +41,7 @@
4141
box-shadow: 0 2.5em 0 -1.3em #ffffff;
4242
}
4343
40% {
44-
box-shadow: 0 2.5em 0 0 #FFF;
44+
box-shadow: 0 2.5em 0 0 #ffffff;
4545
}
4646
}
4747
@keyframes load7 {
@@ -51,6 +51,6 @@
5151
box-shadow: 0 2.5em 0 -1.3em #ffffff;
5252
}
5353
40% {
54-
box-shadow: 0 2.5em 0 0 #FFF;
54+
box-shadow: 0 2.5em 0 0 #ffffff;
5555
}
5656
}

‎css/load8.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.load8 .loader {
2-
margin: 6em auto;
2+
margin: 60px auto;
33
font-size: 10px;
44
position: relative;
55
text-indent: -9999em;

0 commit comments

Comments
 (0)