Skip to content

Commit d730bde

Browse files
stianjensenstianjensen
committed
Add lego-themed loading screen
1 parent 8bccb4d commit d730bde

File tree

1 file changed

+100
-24
lines changed

1 file changed

+100
-24
lines changed

‎index.html

+100-24
Original file line numberDiff line numberDiff line change
@@ -23,14 +23,12 @@
2323
margin: 0;
2424
border: 0;
2525
outline: 0;
26-
background: -webkit-linear-gradient(top, #FFFFFF, #CCDDFF);
27-
background: -moz-linear-gradient(top, #FFFFFF, #CCDDFF);
28-
background-size: cover;
26+
background: #fe0000;
2927
}
3028

3129
h1, h2 {
3230
text-align: center;
33-
color: black;
31+
color: white;
3432
}
3533

3634
canvas {
@@ -44,41 +42,112 @@
4442
}
4543

4644
.loading-text {
47-
position: fixed;
48-
left: 45%;
49-
top: 52%;
50-
width: 10%;
51-
color: black;
45+
width: 100%;
46+
color: #feaaaa;
5247
text-align: center;
53-
font-size: 14px;
48+
font-size: 23px;
49+
font-weight: bold;
50+
margin: 2px 0;
5451
}
5552

5653
.progress-bar-inner {
5754
width: 0;
58-
height: 100%;
59-
background: #2c7f61;
55+
height: 27px;
56+
background: #888;
57+
border-top: 1px solid #666;
58+
border-bottom: 1px solid #666;
59+
position: absolute;
60+
top: 5px;
61+
}
62+
63+
.progress-bar-inner::before {
64+
content: '';
65+
position: absolute;
66+
top: -1px;
67+
left: -2px;
68+
background: #888;
69+
width: 2px;
70+
height: 27px;
71+
border-top: 1px solid #666;
72+
border-left: 1px solid #666;
73+
border-bottom: 1px solid #666;
74+
border-top-left-radius: 3px;
75+
border-bottom-left-radius: 3px;
76+
z-index: -1;
77+
}
78+
79+
.progress-bar-inner::after {
80+
content: '';
81+
position: absolute;
82+
top: -1px;
83+
right: -2px;
84+
width: 2px;
85+
height: 27px;
86+
background: #888;
87+
border-top: 1px solid #666;
88+
border-right: 1px solid #666;
89+
border-bottom: 1px solid #666;
90+
border-top-right-radius: 3px;
91+
border-bottom-right-radius: 3px;
92+
z-index: -1;
93+
}
94+
95+
.progress-bar-inner-inner {
96+
width: 100%;
97+
position: relative;
98+
top: 8px;
99+
border-top: 2px solid #555;
100+
height: 8px;
101+
border-bottom: 2px solid #555;
102+
margin: 0 -2px;
103+
padding: 0 2px;
60104
}
61105

62106
.progress-bar-container {
63107
position: fixed;
64-
left: 45%;
65-
top: 54.5%;
66-
bottom: 43.5%;
67-
width: 10%;
68-
border: 1px solid #2c7f61;
108+
left: 10%;
109+
top: 50%;
110+
width: 80%;
111+
border: 2px dashed #fe8888;
112+
padding: 5px 6px;
113+
border-radius: 4px;
114+
height: 27px;
115+
margin-top: -10px;
69116
}
70117

71118
#start-button {
72119
position: fixed;
73120
left: 45%;
74-
top: 54.5%;
121+
top: 50%;
75122
width: 10%;
76-
color: black;
123+
color: white;
77124
text-decoration: none;
78125
text-align: center;
79-
border: 1px solid black;
80-
padding: 5px;
81-
margin-top: -10px;
126+
border: 2px solid #fff;
127+
border-top: none;
128+
padding: 10px 5px 5px;
129+
margin-top: -5px;
130+
}
131+
.top-container {
132+
position: absolute;
133+
top: -8px;
134+
left: 0;
135+
right: 0;
136+
display: flex;
137+
flex-direction: row;
138+
justify-content: space-around;
139+
border-bottom: 2px solid #fff;
140+
padding: 0 5px;
141+
}
142+
.top {
143+
position: relative;
144+
top: 2px;
145+
border-left: 2px solid #fff;
146+
border-top: 2px solid #fff;
147+
border-right: 2px solid #fff;
148+
background: #fe0000;
149+
height: 6px;
150+
width: 8px;
82151
}
83152
#pouet-link {
84153
position: fixed;
@@ -95,15 +164,21 @@
95164

96165
<body>
97166
<div id=wrapper class=visible>
98-
<div class=loading-text>Loading...</div>
99167
<div class=progress-bar-container>
168+
<div class=loading-text>Loading...</div>
100169
<div class=progress-bar-inner>
170+
<div class=progress-bar-inner-inner></div>
101171
</div>
102172
</div>
103173
<a id=start-button class=hide href=javascript:; onclick=STARTDEMO();>
174+
<div class=top-container>
175+
<div class=top></div>
176+
<div class=top></div>
177+
<div class=top></div>
178+
<div class=top></div>
179+
</div>
104180
START
105181
</a>
106-
<a href="http://www.pouet.net/groups.php?which=11702" target="_blank" id="pouet-link">Read more about this demo on Pouet</a>
107182
</div>
108183
<script>
109184
var loadingText = document.querySelector('.loading-text');
@@ -144,6 +219,7 @@
144219
demo.start();
145220
}, 100);
146221
};
222+
147223
</script>
148224

149225
NIN_WILL_REPLACE_THIS_TAG_WITH_YOUR_ANALYTICS_ID

0 commit comments

Comments
 (0)