Update loading spinner

1 files changed, 12 insertions, 26 deletions

diff --git a/web/app.css b/web/app.css
index 97f3981f..b15dec34 100644
--- a/web/app.css
+++ b/web/app.css
@@ -31,38 +31,24 @@ body.x-border-layout-ct, div.x-border-layout-ct {
     font-size: x-small;
 }
 
-#spinner {
+#spinner:before {
+    content: '';
+    box-sizing: border-box;
     position: absolute;
     top: 50%;
     left: 50%;
-    height: 60px;
     width: 60px;
+    height: 60px;
     margin-top: -30px;
     margin-left: -30px;
-    -webkit-animation: rotation .8s infinite linear;
-    -moz-animation: rotation .8s infinite linear;
-    -o-animation: rotation .8s infinite linear;
-    animation: rotation .8s infinite linear;
-    border-left: 6px solid rgba(56, 146, 212, .15);
-    border-right: 6px solid rgba(56, 146, 212, .15);
-    border-bottom: 6px solid rgba(56, 146, 212, .15);
-    border-top: 6px solid rgba(56, 146, 212, .8);
-    border-radius: 100%;
+    border-radius: 50%;
+    border-top: 6px solid #5fa2dd;
+    border-right: 6px solid transparent;
+    animation: spinner .6s linear infinite;
 }
 
-@-webkit-keyframes rotation {
-    from { -webkit-transform: rotate(0deg); }
-    to { -webkit-transform: rotate(359deg); }
-}
-@-moz-keyframes rotation {
-    from { -moz-transform: rotate(0deg); }
-    to { -moz-transform: rotate(359deg); }
-}
-@-o-keyframes rotation {
-    from { -o-transform: rotate(0deg); }
-    to { -o-transform: rotate(359deg); }
-}
-@keyframes rotation {
-    from { transform: rotate(0deg); }
-    to { transform: rotate(359deg); }
+@keyframes spinner {
+    to {
+        transform: rotate(360deg);
+    }
 }