#141 - Show animated spinner when upload progress is 0%.

neptuo · Oct 5, 2020 · 67279ef · 67279ef
1 parent e4b7098
commit 67279ef
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 2 deletions.
diff --git a/src/Recollections.Blazor.UI/Entries/Pages/EntryDetail.razor.cs b/src/Recollections.Blazor.UI/Entries/Pages/EntryDetail.razor.cs
@@ -325,7 +325,7 @@ public string StatusCssClass
                 if (Progress.Status == "done")
                     return "text-success";
                 else if (Progress.Status == "current")
-                    return $"text-primary";
+                    return Progress.Percentual == 0 ? "loading-circle" : $"text-primary";
                 else if (Progress.Status == "error")
                     return "text-danger";
                 else if (Progress.Status == "pending")

diff --git a/src/Recollections.Blazor.UI/wwwroot/css/_loading.scss b/src/Recollections.Blazor.UI/wwwroot/css/_loading.scss
@@ -40,3 +40,23 @@
         }
     }
 }
+
+.loading-circle {
+    border: 8px solid #BCBFBE;
+    border-top: 8px solid #007BFF;
+    border-radius: 50%;
+    width: 60px;
+    height: 60px;
+    animation: spin 2s linear infinite;
+    color: transparent;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
diff --git a/src/Recollections.Blazor.UI/wwwroot/css/site.css b/src/Recollections.Blazor.UI/wwwroot/css/site.css
@@ -57,6 +57,21 @@ a {
     top: 19px;
     height: 26px; } }
 
+.loading-circle {
+  border: 8px solid #BCBFBE;
+  border-top: 8px solid #007BFF;
+  border-radius: 50%;
+  width: 60px;
+  height: 60px;
+  animation: spin 2s linear infinite;
+  color: transparent; }
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg); }
+  100% {
+    transform: rotate(360deg); } }
+
 .inline-editor .oi-check, .inline-editor .fa-check {
   color: var(--green); }
 

diff --git a/src/Recollections.Blazor.UI/wwwroot/css/site.min.css b/src/Recollections.Blazor.UI/wwwroot/css/site.min.css