spacebar/SplatNet
spacebar/SplatNet
Watch
13
1
Fork
You've already forked SplatNet
 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix issues with the loading icon not appearing correctly (why?)

Browse source
This commit is contained in:
kittentm 2026-01-17 00:12:37 +01:00
commit ebedc92127
3 changed files with 46 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

11
index.html
View file

@ -1,15 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta charset="UTF-8" />
<title>SplatNet | Stages</title>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="header">
<img src="../../assets/SplatNetLogo.png" class="logo" alt="SplatNet Logo">
<img src="assets/SplatNetLogo.png" class="logo" alt="SplatNet Logo" />
</div>
<div id="loading-overlay" class="loading-overlay">
@ -18,8 +18,7 @@
</div>
<div class="content">
<img src="../../assets/stageinfo.png" class="stage-info" alt="Stage Info">
<img src="assets/stageinfo.png" class="stage-info" alt="Stage Info" />
<div class="stages-container" id="stages-container"></div>
</div>

5
stages.js
View file

@ -63,7 +63,7 @@ function animateLoadingCanvas() {
let currentFrame = 0;
let lastUpdateTime = 0;
const frameDuration = 50; // ms per frame
const frameDuration = 50;
let animationId;
@ -116,7 +116,7 @@ async function renderStages() {
<h2 class="error-message">
Something went wrong! Try reloading the page. If this problem persists you may be ratelimited.
</h2>
`;
`;
return;
}
@ -144,4 +144,5 @@ async function renderStages() {
}
}
animateLoadingCanvas();
renderStages();

77
styles.css
View file

@ -5,45 +5,6 @@
font-style: normal;
}
.loading-overlay {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0,0,0,0.8);
border: 3px solid white;
border-radius: 12px;
padding: 20px 24px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 9999;
user-select: none;
pointer-events: none;
width: 200px; /* Updated width */
height: 250px; /* Updated height */
box-sizing: border-box;
}
#loading-canvas {
image-rendering: pixelated;
/* Make sure canvas doesn't get resized by CSS */
width: 100px;
height: 100px;
display: block;
margin: 0 auto; /* center horizontally */
}
#loading-text {
margin-top: 12px;
color: white;
font-family: "Splatoon1", sans-serif;
font-size: 20px;
letter-spacing: 1.2px;
text-align: center;
}
html, body {
margin: 0;
padding: 0;
@ -139,3 +100,41 @@ body {
text-align: center;
margin-top: 40px;
}
.loading-overlay {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 250px;
background-color: rgba(0,0,0,0.8);
border: 3px solid white;
border-radius: 12px;
padding: 20px 24px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 9999;
user-select: none;
pointer-events: none;
box-sizing: border-box;
}
#loading-canvas {
image-rendering: pixelated;
width: 100px;
height: 100px;
display: block;
margin: 0 auto;
}
#loading-text {
margin-top: 12px;
color: white;
font-family: "Splatoon1", sans-serif;
font-size: 20px;
letter-spacing: 1.2px;
text-align: center;
}