Added loading throbber

index.html

@@ -24,6 +24,10 @@
       <h4 id="recordnumbertext">Record Number</h4>
 			<h2 id="nametext">Scientific Name</h2>
 		</div>
+    <div id="loader-container">
+      <div class="spinner"></div>
+      <div id="loading-text">Loading</div>
+    </div>
     <script type="module" src="main.js"></script>
   </body>
 </html>

main.css

@@ -71,3 +71,35 @@ h2 {
 h4 {
     margin: 0px;
 }
+
+/* Container that covers the whole screen */
+#loader-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  /*background-color: #1111115d; */ /* Dark background */
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 999; /* Ensure it stays on top of the Three.js canvas */
+  color: black;
+  font-family: 'Blender Pro Bold';
+}
+
+/* The actual spinning throbber */
+.spinner {
+  width: 50px;
+  height: 50px;
+  border: 5px solid rgba(0, 0, 0, 0.3);
+  border-radius: 50%;
+  border-top-color: #303030;
+  animation: spin 1s ease-in-out infinite;
+  margin-bottom: 20px;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}

main.js

@@ -87,6 +87,10 @@ function updateNameText(name) {
 
 const gui = new GUI({ width: 425 }); //New UI
 
+//Loading elements 
+const loaderContainer = document.getElementById('loader-container');
+const loadingText = document.getElementById('loading-text');
+
 //Load Function
 function loadModel(modelPath) {
     if (currentModel) {
@@ -103,12 +107,15 @@ function loadModel(modelPath) {
         });
         currentModel = null;
     }
+    loaderContainer.style.display = 'flex';
     console.log(`Loaded: ${modelPath}`);
 
     loader.load(modelPath, (glb) => {
         currentModel = glb.scene;
         scene.add(glb.scene);
+        loaderContainer.style.display = 'none'; // Hide Loading Throbber
     });
+    
 }
 function startApp() {
     // 1. Create an object to hold the currently selected values