From 3a66efa4706f90ab17a40405a6f9bc25d7c1650b Mon Sep 17 00:00:00 2001
From: Florian Eisenmenger <floeis@MBP-von-Florian.fritz.box>
Date: Fri, 7 Jun 2024 13:56:46 +0200
Subject: [PATCH] loader final

---
 .../_components/paging/paging.component.html  |  4 +++-
 matsen-tool/src/assets/scss/_basics.scss      | 21 ++++++++++++++-----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/matsen-tool/src/app/_components/paging/paging.component.html b/matsen-tool/src/app/_components/paging/paging.component.html
index c6029d9..ff7e0b0 100644
--- a/matsen-tool/src/app/_components/paging/paging.component.html
+++ b/matsen-tool/src/app/_components/paging/paging.component.html
@@ -28,4 +28,6 @@
                    showFirstLastButtons>
     </mat-paginator>
 </div>
-<span class="spt-loader" *ngIf="loading"></span>
+<div class="spt-loader-box" *ngIf="loading">
+    <span class="spt-loader"></span>
+</div>
diff --git a/matsen-tool/src/assets/scss/_basics.scss b/matsen-tool/src/assets/scss/_basics.scss
index a0c644e..62e9a41 100644
--- a/matsen-tool/src/assets/scss/_basics.scss
+++ b/matsen-tool/src/assets/scss/_basics.scss
@@ -255,19 +255,30 @@ img {
   }
 }
 
+.spt-loader-box {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  background: #9eb3c1;
+  width: 130px;
+  height: 130px;
+  border: 3px solid #2b3a44;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+}
 .spt-loader {
   width: 24px;
   height: 80px;
   display: block;
-  margin: 35px auto 0;
   border: 1px solid #FFF;
   border-radius: 0 0 50px 50px;
-  position: fixed;
+  position: absolute;
   left: 50%;
   top: 50%;
-  box-shadow: 0px 0px #FF3D00 inset;
-  background-image: linear-gradient(#FF3D00 100px, transparent 0);
-  background-position: 0px 0px;
+  transform: translate(-50%, -50%);
+  box-shadow: 0 0 $color-matsen inset;
+  background-image: linear-gradient($color-matsen 100px, transparent 0);
+  background-position: 0 0;
   background-size: 22px 80px;
   background-repeat: no-repeat;
   box-sizing: border-box;