From c39edccb32741ad8f87d4cbf6675e443ecc8be77 Mon Sep 17 00:00:00 2001
From: Ben Gotow <bengotow@gmail.com>
Date: Wed, 9 Dec 2015 13:34:39 -0800
Subject: [PATCH] fix(spinner): Improve loading indicator style / tweening

---
 src/components/spinner.cjsx    |  1 +
 static/components/spinner.less | 31 ++++++++++++-------------------
 2 files changed, 13 insertions(+), 19 deletions(-)

diff --git a/src/components/spinner.cjsx b/src/components/spinner.cjsx
index c20dabb3f..8a62fd492 100644
--- a/src/components/spinner.cjsx
+++ b/src/components/spinner.cjsx
@@ -109,6 +109,7 @@ class Spinner extends React.Component
       <div className="bounce1"></div>
       <div className="bounce2"></div>
       <div className="bounce3"></div>
+      <div className="bounce4"></div>
     </div>
 
 module.exports = Spinner
diff --git a/static/components/spinner.less b/static/components/spinner.less
index 4d1d0ad84..1a158a347 100644
--- a/static/components/spinner.less
+++ b/static/components/spinner.less
@@ -5,7 +5,7 @@
   width: 94px;
   text-align: center;
   opacity: 1;
-  -webkit-transition: opacity 0.2s linear; //transition
+  transition: opacity 0.2s linear;
   pointer-events: none;
 }
 
@@ -15,7 +15,6 @@
 .spinner.paused {
   > div {
     // important. animating with opacity 0 chews up about 5% cpu
-    -webkit-animation-play-state: paused;
     animation-play-state: paused;
   }
 }
@@ -27,42 +26,36 @@
 }
 
 .spinner > div {
-  width: 18px;
-  height: 18px;
-  background-color: @gray-light;
+  width: 14px;
+  height: 14px;
 
   border-radius: 100%;
+  border: 1px solid @gray-light;
   display: inline-block;
-  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
-  animation: bouncedelay 1.2s infinite ease-in-out;
+  animation: bouncedelay 1.1s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95);
   /* Prevent first frame from flickering when animation starts */
-  -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
   margin-right:4px;
   margin-left:4px;
 }
 
 .spinner .bounce1 {
-  -webkit-animation-delay: -0.32s;
-  animation-delay: -0.32s;
+  animation-delay: -0.34s;
 }
-
 .spinner .bounce2 {
-  -webkit-animation-delay: -0.16s;
-  animation-delay: -0.16s;
+  animation-delay: -0.22s;
 }
-
-@-webkit-keyframes bouncedelay {
-  0%, 80%, 100% { -webkit-transform: scale(0.0) }
-  40% { -webkit-transform: scale(1.0) }
+.spinner .bounce3 {
+  animation-delay: -0.12s;
+}
+.spinner .bounce4 {
+  animation-delay: 0s;
 }
 
 @keyframes bouncedelay {
   0%, 80%, 100% {
     transform: scale(0.0);
-    -webkit-transform: scale(0.0);
   } 40% {
     transform: scale(1.0);
-    -webkit-transform: scale(1.0);
   }
 }