Update loader screen style

DrA1ex · Sep 21, 2023 · 646eb69 · 646eb69
1 parent 9b69906
commit 646eb69
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 5 deletions.
diff --git a/src/app/components/loading-screen/loading-screen.component.html b/src/app/components/loading-screen/loading-screen.component.html
@@ -1,6 +1,6 @@
 <div class="loading-screen" [ngClass]="{visible}">
-    <div class="loading-screen-progress">
-        <h3 class="text-center">{{label}}</h3>
+    <div class="panel loading-screen-progress">
+        <h3 class="text-center">{{label}}<span class="spinner dots"></span></h3>
         <div class="progress">
             <div class="progress-bar progress-bar-striped progress-bar-animated"
                  role="progressbar" [style.width.%]="total > 0 ? (current / total) * 100 : 0">

diff --git a/src/app/components/loading-screen/loading-screen.component.ts b/src/app/components/loading-screen/loading-screen.component.ts
@@ -8,7 +8,7 @@ export type LoadingConverterFn = (value: number) => string;
     styleUrls: ['./loading-screen.component.css']
 })
 export class LoadingScreenComponent {
-    @Input() label = "Loading...";
+    @Input() label = "Loading";
     @Input() visible: boolean = false;
 
     @Input() current: number = 0

diff --git a/src/app/pages/demo3/demo3.component.html b/src/app/pages/demo3/demo3.component.html
@@ -19,7 +19,7 @@ <h2>Source image</h2>
         <div class="col-md-6">
             <h2>
                 Generated Image
-                <span class="spinner ms-2" *ngIf="isRendering"></span>
+                <span class="spinner circle ms-2" *ngIf="isRendering"></span>
             </h2>
             <binary-image-drawer class="border border-2" [canvasWidth]="400" [canvasHeight]="400"
                                  #generatedImage></binary-image-drawer>

diff --git a/src/styles.css b/src/styles.css
@@ -10,17 +10,50 @@
     cursor: not-allowed;
 }
 
+.panel {
+    padding: 1.5rem 1rem;
+    background: white;
+    border: 2px #888e92 solid;
+    border-radius: 0.3rem;
+}
+
 .spinner {
     display: inline-block;
     width: 1em;
     height: 1em;
 
     line-height: 1;
-    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg display="block" style="background:transparent; margin:auto" preserveAspectRatio="xMidYMid" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="29" fill="none" stroke="%231d0e0b" stroke-dasharray="136.659280431156 47.553093477052" stroke-width="7"><animateTransform attributeName="transform" dur="1s" keyTimes="0;1" repeatCount="indefinite" type="rotate" values="0 50 50;360 50 50"/></circle></svg>');
 }
 
 .spinner::before {
     content: " ";
     box-sizing: border-box;
     display: inline-block;
+}
+
+.spinner.circle {
+    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg display="block" style="background:transparent; margin:auto" preserveAspectRatio="xMidYMid" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="29" fill="none" stroke="%231d0e0b" stroke-dasharray="136.659280431156 47.553093477052" stroke-width="7"><animateTransform attributeName="transform" dur="1s" keyTimes="0;1" repeatCount="indefinite" type="rotate" values="0 50 50;360 50 50"/></circle></svg>');
+}
+
+.spinner.dots {
+    text-align: left;
+}
+
+.spinner.dots::before {
+    content: ".";
+    animation: dot-animation infinite 1s linear;
+}
+
+@keyframes dot-animation {
+    0% {
+        content: ".";
+    }
+
+    20% {
+        content: "..";
+    }
+
+    40% {
+        content: "...";
+    }
 }