Tweak spinner appearence

Change the look of the "busy" spinner a bit. It's mostly used for
connection stuff, so give it a more data flow feel. Also bling it
up a bit with some fading. Perty sells. :)

diff --git a/app/styles/base.css b/app/styles/base.css
index c8b63b3b4ddda2130206eb6b50901e5752dd09bb..d166bb3463a3ab1c2db5870921c43e6fdee1671c 100644 (file)
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -52,24 +52,27 @@ html {
 .noVNC_spinner, .noVNC_spinner::before, .noVNC_spinner::after {
   width: 10px;
   height: 10px;
-  border-radius: 50%;
-  animation: noVNC_spinner 1.0s ease-in-out alternate infinite;
+  border-radius: 2px;
+  animation: noVNC_spinner 1.0s linear infinite;
 }
 .noVNC_spinner::before {
   content: "";
   position: absolute;
-  left: -20px;
-  animation-delay: -0.2s;
+  left: 0px;
+  top: 0px;
+  animation-delay: -0.1s;
 }
 .noVNC_spinner::after {
   content: "";
   position: absolute;
-  left: 20px;
-  animation-delay: 0.2s;
+  top: 0px;
+  left: 0px;
+  animation-delay: 0.1s;
 }
 @keyframes noVNC_spinner {
-  0% { box-shadow: 0 10px 0 white; }
-  100% { box-shadow: 0 30px 0 white; }
+  0% { box-shadow: -60px 10px 0 rgba(255, 255, 255, 0); width: 20px; }
+  25% { box-shadow: 20px 10px 0 rgba(255, 255, 255, 1); width: 10px; }
+  50% { box-shadow: 60px 10px 0 rgba(255, 255, 255, 0); width: 10px; }
 }
 
 /* ----------------------------------------