add new progress bar to our app

src/app/reports/run-report/table-and-sms/table-and-sms.component.html

@@ -45,8 +45,8 @@
     </div>
   </div>
 
-  <div class="table-output" *ngIf="hideOutput">
-    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+  <div *ngIf="hideOutput" class="loader">
+    <div class="loading"></div>
   </div>
 
   <div class="back-button" *ngIf="!hideOutput">

src/app/reports/run-report/table-and-sms/table-and-sms.component.scss

@@ -1,7 +1,3 @@
-.table-output {
-    overflow: auto;
-}
-
 .select-row:hover {
     cursor: pointer;
   }
@@ -18,3 +14,85 @@
   max-height: 2%;
   margin-bottom: 2%;
 }
+
+$bar: 140px;
+$foo: $bar * 8;
+$color: #e2e4ec;
+
+.loader {
+  margin-bottom: 39px;
+  overflow: auto;
+}
+
+.loading {
+  position: absolute;
+  width: $bar;
+  height: 8px;
+  background: linear-gradient(125deg, rgb(255, 255, 255), #c4d2e9, rgb(255, 255, 255));
+  animation: grow 4s linear infinite, move 4s linear infinite;
+  top: 82px;
+}
+
+.sidenav {
+  overflow-x: hidden;
+}
+
+@keyframes move {
+  0% {
+    left: 0;
+  }
+
+  16.7% {
+    left: 0;
+  }
+
+  33.3% {
+    left: $foo / 2;
+  }
+
+  50% {
+    left: $foo - $bar;
+  }
+
+  66.7% {
+    left: $foo / 2;
+  }
+
+  83.3% {
+    left: 0;
+  }
+
+  100% {
+    left: 0;
+  }
+}
+
+@keyframes grow {
+  0% {
+    width: $bar;
+  }
+
+  16.7% {
+    width: $foo / 2;
+  }
+
+  33.3% {
+    width: $foo / 2;
+  }
+
+  50% {
+    width: $bar;
+  }
+
+  66.7% {
+    width: $foo / 2;
+  }
+
+  83.3% {
+    width: $foo / 2;
+  }
+
+  100% {
+    width: $bar;
+  }
+}