Spaces:
Running
Running
Add loading overlay with progress + Korean status messages
Browse files- index.html +51 -0
index.html
CHANGED
|
@@ -26,7 +26,58 @@
|
|
| 26 |
<body>
|
| 27 |
<div class="sigma-parent">
|
| 28 |
<div class="sigma-expand" id="sigma-canvas"></div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 29 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 30 |
<div id="mainpanel">
|
| 31 |
<div class="col">
|
| 32 |
<div id="title"></div>
|
|
|
|
| 26 |
<body>
|
| 27 |
<div class="sigma-parent">
|
| 28 |
<div class="sigma-expand" id="sigma-canvas"></div>
|
| 29 |
+
<div id="loading-overlay">
|
| 30 |
+
<div class="loading-card">
|
| 31 |
+
<div class="loading-spinner"></div>
|
| 32 |
+
<div class="loading-title">π Model Galaxy</div>
|
| 33 |
+
<div class="loading-status" id="loading-status">λ°μ΄ν° λ‘λ© μ€β¦</div>
|
| 34 |
+
<div class="loading-progress"><div id="loading-bar"></div></div>
|
| 35 |
+
<div class="loading-hint">22,400+ λ
Έλμ κ°€λμλ₯Ό 그리λ μ€μ
λλ€ (5β15μ΄ μμ).<br>μλ£ ν μ°μλ¨ π³ Darwin Β· μ°νλ¨ β Trending ν΄λ¬μ€ν°λ₯Ό νμΈνμΈμ.</div>
|
| 36 |
+
</div>
|
| 37 |
+
</div>
|
| 38 |
</div>
|
| 39 |
+
<script>
|
| 40 |
+
// Hide overlay once sigma is initialized + show progress on data fetch
|
| 41 |
+
(function(){
|
| 42 |
+
var s = document.getElementById('loading-status');
|
| 43 |
+
var bar = document.getElementById('loading-bar');
|
| 44 |
+
var overlay = document.getElementById('loading-overlay');
|
| 45 |
+
var origFetch = window.fetch;
|
| 46 |
+
var step = 0;
|
| 47 |
+
var stages = [
|
| 48 |
+
'Atlas λ©νλ°μ΄ν° λ‘λ μ€β¦',
|
| 49 |
+
'μμΆλ κ·Έλν λ€μ΄λ‘λ μ€β¦',
|
| 50 |
+
'Gzip μμΆ ν΄μ μ€β¦',
|
| 51 |
+
'λ
Έλ / μ£μ§ νμ± μ€β¦',
|
| 52 |
+
'Sigma.js λ μ΄μμ κ³μ° μ€β¦',
|
| 53 |
+
'κ±°μ μλ£β¦'
|
| 54 |
+
];
|
| 55 |
+
var i = 0;
|
| 56 |
+
var tick = setInterval(function(){
|
| 57 |
+
if (i < stages.length) { s.textContent = stages[i]; bar.style.width = ((i+1)*16) + '%'; i++; }
|
| 58 |
+
}, 1200);
|
| 59 |
+
// Watchdog: hide overlay when canvas has children (sigma rendered)
|
| 60 |
+
var watch = setInterval(function(){
|
| 61 |
+
var canvas = document.querySelectorAll('#sigma-canvas canvas');
|
| 62 |
+
if (canvas.length > 0) {
|
| 63 |
+
clearInterval(watch); clearInterval(tick);
|
| 64 |
+
bar.style.width = '100%'; s.textContent = 'μλ£ β';
|
| 65 |
+
setTimeout(function(){
|
| 66 |
+
overlay.style.opacity = '0';
|
| 67 |
+
setTimeout(function(){ overlay.style.display = 'none'; }, 400);
|
| 68 |
+
}, 250);
|
| 69 |
+
}
|
| 70 |
+
}, 250);
|
| 71 |
+
// Hard cap: hide after 30s no matter what
|
| 72 |
+
setTimeout(function(){
|
| 73 |
+
if (overlay.style.display !== 'none') {
|
| 74 |
+
overlay.style.opacity = '0';
|
| 75 |
+
setTimeout(function(){ overlay.style.display = 'none'; }, 400);
|
| 76 |
+
clearInterval(watch); clearInterval(tick);
|
| 77 |
+
}
|
| 78 |
+
}, 30000);
|
| 79 |
+
})();
|
| 80 |
+
</script>
|
| 81 |
<div id="mainpanel">
|
| 82 |
<div class="col">
|
| 83 |
<div id="title"></div>
|