Loading icon added

as 'Loading Icon #3' issue menttions i added a loading icon.
Digital-Heritage-Lab · Nov 17, 2024 · 8de2f2a · 8de2f2a
1 parent 00205e4
commit 8de2f2a
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 0 deletions.
diff --git a/Apps/3DHeritageMapApp.html b/Apps/3DHeritageMapApp.html
@@ -14,6 +14,13 @@
 </head>
 
 <body>
+    <!-- Loading Icon -->
+    <div id="loadingScreen">
+        <div class="spinner"></div>
+        <p>Loading...</p>
+    </div>
+
+
     <!-- Options box -->
     <div id="optionsBox">
         <h2>Options</h2>

diff --git a/Apps/3DHeritageScripts.js b/Apps/3DHeritageScripts.js
@@ -402,3 +402,20 @@ document.getElementById('openOptionsBox').onclick = () => {
     document.getElementById('optionsBox').style.display = 'block';
     document.getElementById('openOptionsBox').style.display = 'none';
 };
+
+
+// Loading icon element
+const loadingScreen = document.getElementById('loadingScreen');
+
+// Hide loading icon after the map uploaded
+viewer.scene.globe.tileLoadProgressEvent.addEventListener((count) => {
+    if (count === 0) {
+        console.log('Tüm veriler yüklendi');
+        loadingScreen.style.display = 'none'; // Hide
+    }
+});
+
+// Show loading icon while the page is loading
+window.addEventListener('load', () => {
+    loadingScreen.style.display = 'flex';
+});
diff --git a/Apps/3DHeritageStyles.css b/Apps/3DHeritageStyles.css
@@ -124,3 +124,38 @@
      border: 2px;
      border-color: white;
  }
+
+
+ /* Loading icon styles */
+ #loadingScreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+    color: white;
+    font-family: Arial, sans-serif;
+}
+
+.spinner {
+    border: 4px solid rgba(255, 255, 255, 0.3);
+    border-top: 4px solid white;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}