From 3f48c7017d5828733d6dbda83c7c22d09f98616e Mon Sep 17 00:00:00 2001
From: Pierre Ossman <ossman@cendio.se>
Date: Tue, 7 Feb 2017 16:09:10 +0100
Subject: [PATCH] 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. :)
---
 app/styles/base.css | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/app/styles/base.css b/app/styles/base.css
index c8b63b3..d166bb3 100644
--- 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; }
 }
 
 /* ----------------------------------------
-- 
GitLab