Update styles for a loading audit.

src/app/dars/dars-view/dars-view.component.html

@@ -12,15 +12,16 @@
         </button>
       </div>
 
-      <!-- <ng-container [ngSwitch]="visibleAuditStatus$ | async"> -->
       <ng-container [ngSwitch]="visibleAuditStatus$ | async">
         <ng-container *ngSwitchCase="'Loaded'">
           <cse-dars-audit [audit]="audit$ | async"></cse-dars-audit>
         </ng-container>
         <ng-container *ngSwitchCase="'Loading'">
-          <img id="loading-bucky" src="../../../assets/img/bucky-happy.svg" alt="Happy Bucky Badger">
-          <p>Loading your degree Audit</p>
-          <mat-spinner diameter="50"></mat-spinner>
+          <mat-card class="loading-wrapper">
+            <mat-progress-bar class="loading-audit-progress-bar" mode="query"></mat-progress-bar>
+            <img id="loading-bucky" src="../../../assets/img/bucky-happy.svg" alt="Happy Bucky Badger">
+            <p>Loading your degree Audit</p>
+          </mat-card>
         </ng-container>
       </ng-container>
     </div>

src/app/dars/dars-view/dars-view.component.scss

@@ -44,23 +44,29 @@
   margin: 0 1rem 1rem;
 }
 
-#loading-bucky {
-  width: 100%;
-  display: block;
-  max-width: 256px;
-}
-
-#loading-audit {
+.loading-wrapper {
+  position: relative;
+  padding: 50px 10px;
   text-align: center;
   font-family: mat-font-family($config);
+
+  .loading-audit-progress-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+
+    border-radius: 0 0 4px 4px;
+  }
+
   img {
     width: 100%;
-    max-width: 150px;
+    max-width: 125px;
     margin: auto;
   }
 
   p {
-    text-transform: uppercase;
+    // text-transform: uppercase;
     font-weight: bold;
     font-size: 18px;
   }