Loading screen percentage

src/index.html

@@ -21,6 +21,14 @@ <h1>Solar System Model</h1>
           <span id="createdBy">created by</span>
           <span id="name">Kyle Gough</span>
         </p>
+        <div id="loader-progress">
+          <div id="loader-text">
+            Loading...
+          </div>
+          <div id="loader-percentage">
+            0%
+          </div>
+        </div>
         <div id="loader">
           <div id="loader-circle">
             <svg
@@ -37,9 +45,6 @@ <h1>Solar System Model</h1>
             </svg>
           </div>
         </div>
-        <div id="loader-text">
-          Loading...
-        </div>
       </div>
     </div>
     <canvas class="webgl"></canvas>

src/setup/textures.ts

@@ -4,14 +4,16 @@ import { onLoaded } from "./loading";
 let textureCount = 0;
 let texturesLoaded = 0;
 const textureLoader = new THREE.TextureLoader();
-const textureLoadSet = new Set<string>();
 
 export const loadTexture = (path: string) => {
-  textureLoadSet.add(path);
   return textureLoader.load(path, () => {
-    textureLoadSet.delete(path);
     texturesLoaded++;
 
+    const percentageContainer = document.getElementById(
+      "loader-percentage"
+    ) as HTMLElement;
+    percentageContainer.textContent = getProgress();
+
     if (texturesLoaded === textureCount) {
       onLoaded();
     }
@@ -21,3 +23,8 @@ export const loadTexture = (path: string) => {
 export const setTextureCount = (n: number) => {
   textureCount = n;
 };
+
+const getProgress = (): string => {
+  const percentage = (100 * texturesLoaded) / textureCount;
+  return `${percentage.toFixed(0)}%`;
+};

src/styles/loading-screen.scss

@@ -1,4 +1,4 @@
-$loader-size: 50px;
+$loader-size: 75px;
 
 #loading {
   position: fixed;
@@ -47,18 +47,21 @@ $loader-size: 50px;
     animation: fadeIn 2s ease-in-out 2.75s 1 forwards;
 
     svg {
-      transform: scale(1.62);
+      transform: scale(3.5);
       animation: loading 2s ease-in-out 4.75s infinite;
     }
   }
 }
 
-#loader-text {
-  margin-top: 1rem;
+#loader-progress {
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
+  margin-top: 1rem;
   font-weight: 100;
   font-size: 0.8rem;
-  opacity: 0;
-  animation: fadeIn 2s ease-in-out 3.5s 1 forwards;
+
+  div {
+    opacity: 0;
+    animation: fadeIn 2s ease-in-out 3.5s 1 forwards;
+  }
 }