fix(spinner): Improve loading indicator style / tweening

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

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);
   }
 }