Explorar el Código

feat(admin-ui): Improve styling of loading indicator

Michael Bromley hace 7 años
padre
commit
5f367324fd
Se han modificado 2 ficheros con 13 adiciones y 1 borrados
  1. 1 1
      admin-ui/src/app/app.component.html
  2. 12 0
      admin-ui/src/app/app.component.scss

+ 1 - 1
admin-ui/src/app/app.component.html

@@ -1,3 +1,3 @@
-<div class="progress loop" *ngIf="loading$ | async"><progress></progress></div>
+<div class="progress loop" [class.visible]="loading$ | async"></div>
 <router-outlet></router-outlet>
 <router-outlet></router-outlet>
 <vdr-overlay-host></vdr-overlay-host>
 <vdr-overlay-host></vdr-overlay-host>

+ 12 - 0
admin-ui/src/app/app.component.scss

@@ -0,0 +1,12 @@
+@import "variables";
+.progress {
+    position: absolute;
+    overflow: hidden;
+    height: 4px;
+    background-color: $color-grey-5;
+    opacity: 0;
+    transition: opacity 0.1s;
+    &.visible {
+        opacity: 1;
+    }
+}