loader final

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>

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;