From d524b919fde9bdbd5238addc816c10c8bca1ea09 Mon Sep 17 00:00:00 2001
From: Marcel Peterkau <marcel@peterkau.de>
Date: Fri, 12 Jan 2024 19:53:10 +0100
Subject: [PATCH] added Animation to Connection-overlay

---
 Software/data_src/index.htm             |  2 +-
 Software/data_src/static/css/tweaks.css | 36 ++++++++++++++++++++++++-
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/Software/data_src/index.htm b/Software/data_src/index.htm
index d96562c..5f8b8f4 100644
--- a/Software/data_src/index.htm
+++ b/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 -->
diff --git a/Software/data_src/static/css/tweaks.css b/Software/data_src/static/css/tweaks.css
index d99d6c5..d80a95b 100644
--- a/Software/data_src/static/css/tweaks.css
+++ b/Software/data_src/static/css/tweaks.css
@@ -41,4 +41,38 @@ hr {
 
 .overlay-content {
     text-align: center;
-}
\ No newline at end of file
+    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);
+    }
+  } 
\ No newline at end of file