浏览代码

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

Michael Bromley 7 年之前
父节点
当前提交
5f367324fd
共有 2 个文件被更改,包括 13 次插入1 次删除
  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>
 <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;
+    }
+}