From e163716c52eb43a0bbac61fcb277977d2ae6b79d Mon Sep 17 00:00:00 2001 From: Eswar Arji Date: Sat, 5 Oct 2024 13:45:33 +0530 Subject: [PATCH] Update earth.html Co-Authored-By: Bala Karthikeya Aluru <91084020+alurubalakarthikeya@users.noreply.github.com> --- SolarPlanets HTML/earth.html | 48 +++++++++++++++++++++++++++++++++++- 1 file changed, 47 insertions(+), 1 deletion(-) diff --git a/SolarPlanets HTML/earth.html b/SolarPlanets HTML/earth.html index 2255f56..e7c936a 100644 --- 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; + } @@ -70,6 +102,10 @@

Planet Name: Earth

+
+
+
0%
+
@@ -192,6 +228,9 @@

Planet Name: Earth

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 @@

Planet Name: Earth

} ); }, - 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); }