Update earth.html

Co-Authored-By: Bala Karthikeya Aluru <91084020+alurubalakarthikeya@users.noreply.github.com>
ArjiJethin · Oct 5, 2024 · e163716 · e163716
1 parent 634e33f
commit e163716
Showing 1 changed file with 47 additions and 1 deletion.
diff --git a/SolarPlanets HTML/earth.html b/SolarPlanets HTML/earth.html
@@ -50,6 +50,38 @@
         opacity: 1;
         transform: translateY(0);
       }
+
+      /* Loading bar styles */
+      .loading-container {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 80%;
+        max-width: 400px;
+        height: 30px;
+        background-color: rgba(255, 255, 255, 0.3);
+        border-radius: 15px;
+        overflow: hidden;
+        z-index: 30; /* Ensure it appears above other elements */
+      }
+
+      .loading-bar {
+        height: 100%;
+        width: 0;
+        background-color: #fff;
+        border-radius: 15px;
+        transition: width 0.3s ease;
+      }
+
+      .loading-text {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        color: #000;
+        font-weight: bold;
+      }
     </style>
   </head>
   <body>
@@ -70,6 +102,10 @@ <h3>Planet Name: Earth</h3>
     </div>
 
     <div class="info-point"></div>
+    <div class="loading-container" id="loadingContainer">
+      <div class="loading-bar" id="loadingBar"></div>
+      <div class="loading-text" id="loadingText">0%</div>
+    </div>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
@@ -192,6 +228,9 @@ <h3>Planet Name: Earth</h3>
           model = gltf.scene;
           scene.add(model);
 
+          // Hide the loading container once the model is loaded
+          document.getElementById("loadingContainer").style.display = "none";
+
           // Load the larger sphere model after the Earth model is loaded
           loader.load(
             "../3D Models/galaxy_sphere/scene.gltf", // Replace with the path to your larger sphere model
@@ -209,7 +248,14 @@ <h3>Planet Name: Earth</h3>
             }
           );
         },
-        undefined,
+        function (xhr) {
+          // Update the loading bar and text based on the loading progress
+          const percentComplete = (xhr.loaded / xhr.total) * 100;
+          const loadingBar = document.getElementById("loadingBar");
+          const loadingText = document.getElementById("loadingText");
+          loadingBar.style.width = `${percentComplete}%`;
+          loadingText.textContent = `${Math.round(percentComplete)}%`;
+        },
         function (error) {
           console.error(error);
         }