Skip to content

Commit 83be95e

Browse files
fabmaxfabmax
committed
Show loading progress
1 parent dced218 commit 83be95e

File tree

2 files changed

+220
-1
lines changed

2 files changed

+220
-1
lines changed

‎live/demos/assets/kool-logo.svg‎

Lines changed: 86 additions & 0 deletions
Loading

‎live/demos/index.html‎

Lines changed: 134 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,21 +10,154 @@
1010
padding: 0;
1111
margin: 0;
1212
overflow: hidden;
13+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
1314
}
1415
canvas {
1516
width: 100vw;
1617
height: 100vh;
1718
display: block;
1819
}
20+
21+
/* Loading Screen Styles */
22+
#loading-screen {
23+
position: fixed;
24+
top: 0;
25+
left: 0;
26+
width: 100vw;
27+
height: 100vh;
28+
//background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
29+
background: linear-gradient(135deg, #0a0a0a 0%, #202020 100%);
30+
display: flex;
31+
flex-direction: column;
32+
justify-content: center;
33+
align-items: center;
34+
z-index: 1000;
35+
transition: opacity 0.5s ease-out;
36+
}
37+
38+
#loading-screen.fade-out {
39+
opacity: 0;
40+
pointer-events: none;
41+
}
42+
43+
.loading-logo {
44+
width: 200px;
45+
margin-bottom: 2rem;
46+
}
47+
48+
.loading-text {
49+
color: #ffffff;
50+
font-size: 4rem;
51+
margin-bottom: 2rem;
52+
opacity: 0.8;
53+
text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
54+
}
55+
56+
.progress-container {
57+
width: 400px;
58+
height: 6px;
59+
background-color: rgba(255, 255, 255, 0.1);
60+
border-radius: 3px;
61+
overflow: hidden;
62+
margin-bottom: 1rem;
63+
}
64+
65+
.progress-bar {
66+
height: 100%;
67+
background: linear-gradient(90deg, #9C27B0, #E1BEE7);
68+
width: 0%;
69+
transition: width 0.3s ease;
70+
border-radius: 3px;
71+
}
72+
73+
.progress-text {
74+
color: #ffffff;
75+
font-size: 0.9rem;
76+
opacity: 0.7;
77+
min-height: 1.2rem;
78+
}
79+
80+
@media (max-width: 600px) {
81+
.progress-container {
82+
width: 80vw;
83+
}
84+
.loading-logo {
85+
width: 100px;
86+
}
87+
.loading-text {
88+
font-size: 1rem;
89+
text-align: center;
90+
padding: 0 1rem;
91+
}
92+
}
1993
</style>
2094
</head>
2195
<body>
96+
<!-- Loading Screen -->
97+
<div id="loading-screen">
98+
<div class="loading-logo"><img src="assets/kool-logo.svg" alt="kool-logo" width="100%"></div>
99+
<div class="loading-text">kool</div>
100+
<div class="progress-container">
101+
<div class="progress-bar" id="progress-bar"></div>
102+
</div>
103+
<div class="progress-text" id="progress-text">Initializing...</div>
104+
</div>
105+
22106
<!-- tabindex is required to make canvas focusable, needed to get per-canvas key events -->
23107
<canvas id="glCanvas" tabindex="0">
24108
Your browser doesn't appear to support the
25109
<code>&lt;canvas&gt;</code> element.
26110
</canvas>
27111

28-
<script src="kool-demo.js"></script>
112+
<script type="module">
113+
// Loading progress management
114+
const progressBar = document.getElementById('progress-bar');
115+
const progressText = document.getElementById('progress-text');
116+
const loadingScreen = document.getElementById('loading-screen');
117+
118+
function updateProgress(progress, text) {
119+
progressBar.style.width = (progress * 100) + '%';
120+
progressText.textContent = text;
121+
}
122+
123+
function hideLoadingScreen() {
124+
loadingScreen.classList.add('fade-out');
125+
setTimeout(() => { loadingScreen.style.display = 'none'; }, 500);
126+
}
127+
128+
async function fetchBlock(url, text, startProgress, stepProgress) {
129+
let response = await fetch(url);
130+
const reader = response.body.getReader();
131+
const contentLength = +response.headers.get('Content-Length');
132+
let receivedLength = 0;
133+
while(true) {
134+
const {done, value} = await reader.read();
135+
if (done) {
136+
break;
137+
}
138+
receivedLength += value.length;
139+
const progress = startProgress + (receivedLength / contentLength) * stepProgress;
140+
updateProgress(progress, text)
141+
}
142+
}
143+
144+
updateProgress(0, 'Loading kool...');
145+
146+
// Fetch essential files tracking progress before actually loading them - will be loaded from cache afterwards
147+
await fetchBlock('kool-demo.js', 'Loading kool...', 0, 0.4)
148+
await fetchBlock('assets/fonts/fira-sans-regular.png', 'Loading fonts...', 0.4, 0.6)
149+
await fetchBlock('4ab48fc16bcbc6611bb2.wasm', 'Loading PhysX...', 0.6, 1.0)
150+
151+
const script = document.createElement('script');
152+
script.src = 'kool-demo.js';
153+
script.onload = function() {
154+
hideLoadingScreen();
155+
};
156+
script.onerror = function() {
157+
updateProgress(0, 'Error loading kool');
158+
progressText.style.color = '#f44336';
159+
};
160+
document.head.appendChild(script);
161+
</script>
29162
</body>
30163
</html>

0 commit comments

Comments
 (0)