added Animation to Connection-overlay

Software/data_src/index.htm

@@ -24,7 +24,7 @@
   <div id="overlay">
     <div class="overlay-content">
       <p>Verbinde...</p>
-      <!-- Hier können Sie eine einfache Animation hinzufügen -->
+      <span class="loader"></span>
     </div>
   </div>
   <!-- Connection-Overlay -->

Software/data_src/static/css/tweaks.css

@@ -41,4 +41,38 @@ hr {
 
 .overlay-content {
     text-align: center;
+    font-size: 4rem;
+}
+
+.loader {
+    width: 96px;
+    height: 96px;
+    border: 12px solid #FFF;
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    box-sizing: border-box;
+    animation: rotation 1s linear infinite;
+  } 
+  .loader::after {
+    content: '';  
+    box-sizing: border-box;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    border: 12px solid transparent;
+    border-bottom-color: #FF3D00;
+  }
+  
+  @keyframes rotation {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
   }