Skip to content

Commit 39cb06e

Browse files
lukehaaslukehaas
committed
start tracking css
1 parent 3b07cf6 commit 39cb06e

File tree

10 files changed

+515
-1
lines changed

10 files changed

+515
-1
lines changed

‎.gitignore

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
node_modules/
2-
css/
2+
css/main.css
33
images/me.jpeg
44
index.html
55
jade/

‎css/fallback.css

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/* Import this if you are using modernizr (recommended)
2+
It means that loaders will fallback to a text state of simply saying "Loading..." in older browsers
3+
*/
4+
.no-cssanimations .load-container .loader {
5+
text-indent: 0;
6+
text-align: center;
7+
color: #FFF;
8+
font-size: 17px;
9+
background: none;
10+
border: 0 none;
11+
width: auto;
12+
height: auto;
13+
margin: 1em auto;
14+
overflow: visible;
15+
box-shadow: none;
16+
-webkit-animation: none;
17+
animation: none;
18+
}
19+
.no-cssanimations .load-container .loader:before,
20+
.no-cssanimations .load-container .loader:after {
21+
display: none;
22+
}

‎css/load1.css

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
.load1 .loader,
2+
.load1 .loader:before,
3+
.load1 .loader:after {
4+
background: #ffffff;
5+
-webkit-animation: load1 1s infinite ease-in-out;
6+
animation: load1 1s infinite ease-in-out;
7+
width: 1em;
8+
height: 4em;
9+
}
10+
.load1 .loader:before,
11+
.load1 .loader:after {
12+
position: absolute;
13+
top: 0;
14+
content: '';
15+
}
16+
.load1 .loader:before {
17+
left: -1.5em;
18+
-webkit-animation-delay: -0.32s;
19+
animation-delay: -0.32s;
20+
}
21+
.load1 .loader {
22+
color: #ffffff;
23+
text-indent: -9999em;
24+
margin: 88px auto;
25+
position: relative;
26+
font-size: 11px;
27+
-webkit-transform: translateZ(0);
28+
-ms-transform: translateZ(0);
29+
transform: translateZ(0);
30+
-webkit-animation-delay: -0.16s;
31+
animation-delay: -0.16s;
32+
}
33+
.load1 .loader:after {
34+
left: 1.5em;
35+
}
36+
@-webkit-keyframes load1 {
37+
0%,
38+
80%,
39+
100% {
40+
box-shadow: 0 0;
41+
height: 4em;
42+
}
43+
40% {
44+
box-shadow: 0 -2em;
45+
height: 5em;
46+
}
47+
}
48+
@keyframes load1 {
49+
0%,
50+
80%,
51+
100% {
52+
box-shadow: 0 0;
53+
height: 4em;
54+
}
55+
40% {
56+
box-shadow: 0 -2em;
57+
height: 5em;
58+
}
59+
}

‎css/load2.css

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
.load2 .loader,
2+
.load2 .loader:before,
3+
.load2 .loader:after {
4+
border-radius: 50%;
5+
}
6+
.load2 .loader:before,
7+
.load2 .loader:after {
8+
position: absolute;
9+
content: '';
10+
}
11+
.load2 .loader:before {
12+
width: 5.2em;
13+
height: 10.2em;
14+
background: #0dc5c1;
15+
border-radius: 10.2em 0 0 10.2em;
16+
top: -0.1em;
17+
left: -0.1em;
18+
-webkit-transform-origin: 5.2em 5.1em;
19+
transform-origin: 5.2em 5.1em;
20+
-webkit-animation: load2 2s infinite ease 1.5s;
21+
animation: load2 2s infinite ease 1.5s;
22+
}
23+
.load2 .loader {
24+
color: #ffffff;
25+
font-size: 11px;
26+
text-indent: -99999em;
27+
margin: 55px auto;
28+
position: relative;
29+
width: 10em;
30+
height: 10em;
31+
box-shadow: inset 0 0 0 1em;
32+
-webkit-transform: translateZ(0);
33+
-ms-transform: translateZ(0);
34+
transform: translateZ(0);
35+
}
36+
.load2 .loader:after {
37+
width: 5.2em;
38+
height: 10.2em;
39+
background: #0dc5c1;
40+
border-radius: 0 10.2em 10.2em 0;
41+
top: -0.1em;
42+
left: 5.1em;
43+
-webkit-transform-origin: 0px 5.1em;
44+
transform-origin: 0px 5.1em;
45+
-webkit-animation: load2 2s infinite ease;
46+
animation: load2 2s infinite ease;
47+
}
48+
@-webkit-keyframes load2 {
49+
0% {
50+
-webkit-transform: rotate(0deg);
51+
transform: rotate(0deg);
52+
}
53+
100% {
54+
-webkit-transform: rotate(360deg);
55+
transform: rotate(360deg);
56+
}
57+
}
58+
@keyframes load2 {
59+
0% {
60+
-webkit-transform: rotate(0deg);
61+
transform: rotate(0deg);
62+
}
63+
100% {
64+
-webkit-transform: rotate(360deg);
65+
transform: rotate(360deg);
66+
}
67+
}

‎css/load3.css

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
.load3 .loader {
2+
font-size: 10px;
3+
margin: 50px auto;
4+
text-indent: -9999em;
5+
width: 11em;
6+
height: 11em;
7+
border-radius: 50%;
8+
background: #ffffff;
9+
background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
10+
background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
11+
background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
12+
background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
13+
background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
14+
position: relative;
15+
-webkit-animation: load3 1.4s infinite linear;
16+
animation: load3 1.4s infinite linear;
17+
-webkit-transform: translateZ(0);
18+
-ms-transform: translateZ(0);
19+
transform: translateZ(0);
20+
}
21+
.load3 .loader:before {
22+
width: 50%;
23+
height: 50%;
24+
background: #ffffff;
25+
border-radius: 100% 0 0 0;
26+
position: absolute;
27+
top: 0;
28+
left: 0;
29+
content: '';
30+
}
31+
.load3 .loader:after {
32+
background: #0dc5c1;
33+
width: 75%;
34+
height: 75%;
35+
border-radius: 50%;
36+
content: '';
37+
margin: auto;
38+
position: absolute;
39+
top: 0;
40+
left: 0;
41+
bottom: 0;
42+
right: 0;
43+
}
44+
@-webkit-keyframes load3 {
45+
0% {
46+
-webkit-transform: rotate(0deg);
47+
transform: rotate(0deg);
48+
}
49+
100% {
50+
-webkit-transform: rotate(360deg);
51+
transform: rotate(360deg);
52+
}
53+
}
54+
@keyframes load3 {
55+
0% {
56+
-webkit-transform: rotate(0deg);
57+
transform: rotate(0deg);
58+
}
59+
100% {
60+
-webkit-transform: rotate(360deg);
61+
transform: rotate(360deg);
62+
}
63+
}

‎css/load4.css

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
.load4 .loader {
2+
color: #ffffff;
3+
font-size: 20px;
4+
margin: 100px auto;
5+
width: 1em;
6+
height: 1em;
7+
border-radius: 50%;
8+
position: relative;
9+
text-indent: -9999em;
10+
-webkit-animation: load4 1.3s infinite linear;
11+
animation: load4 1.3s infinite linear;
12+
-webkit-transform: translateZ(0);
13+
-ms-transform: translateZ(0);
14+
transform: translateZ(0);
15+
}
16+
@-webkit-keyframes load4 {
17+
0%,
18+
100% {
19+
box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
20+
}
21+
12.5% {
22+
box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
23+
}
24+
25% {
25+
box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
26+
}
27+
37.5% {
28+
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
29+
}
30+
50% {
31+
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
32+
}
33+
62.5% {
34+
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
35+
}
36+
75% {
37+
box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
38+
}
39+
87.5% {
40+
box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
41+
}
42+
}
43+
@keyframes load4 {
44+
0%,
45+
100% {
46+
box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
47+
}
48+
12.5% {
49+
box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
50+
}
51+
25% {
52+
box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
53+
}
54+
37.5% {
55+
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
56+
}
57+
50% {
58+
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
59+
}
60+
62.5% {
61+
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
62+
}
63+
75% {
64+
box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
65+
}
66+
87.5% {
67+
box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
68+
}
69+
}

‎css/load5.css

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
.load5 .loader {
2+
margin: 100px auto;
3+
font-size: 25px;
4+
width: 1em;
5+
height: 1em;
6+
border-radius: 50%;
7+
position: relative;
8+
text-indent: -9999em;
9+
-webkit-animation: load5 1.1s infinite ease;
10+
animation: load5 1.1s infinite ease;
11+
-webkit-transform: translateZ(0);
12+
-ms-transform: translateZ(0);
13+
transform: translateZ(0);
14+
}
15+
@-webkit-keyframes load5 {
16+
0%,
17+
100% {
18+
box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
19+
}
20+
12.5% {
21+
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
22+
}
23+
25% {
24+
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
25+
}
26+
37.5% {
27+
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
28+
}
29+
50% {
30+
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
31+
}
32+
62.5% {
33+
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
34+
}
35+
75% {
36+
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
37+
}
38+
87.5% {
39+
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
40+
}
41+
}
42+
@keyframes load5 {
43+
0%,
44+
100% {
45+
box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
46+
}
47+
12.5% {
48+
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
49+
}
50+
25% {
51+
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
52+
}
53+
37.5% {
54+
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
55+
}
56+
50% {
57+
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
58+
}
59+
62.5% {
60+
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
61+
}
62+
75% {
63+
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
64+
}
65+
87.5% {
66+
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
67+
}
68+
}

0 commit comments

Comments
 (0)