diff --git a/src/components/spinner/spinner.scss b/src/components/spinner/spinner.scss
index 46cef57b8ae..fd645b65a45 100644
--- a/src/components/spinner/spinner.scss
+++ b/src/components/spinner/spinner.scss
@@ -1,25 +1,27 @@
+@import "../../colors";
+
 .spinner {
+    position: relative;
     width: 20px;
     height: 20px;
-    position: relative;
 
     .circle {
-        width: 100%;
-        height: 100%;
         position: absolute;
-        left: 0;
         top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
 
         &:before {
-            content: '';
             display: block;
+            animation: circleFadeDelay 1.2s infinite ease-in-out both;
             margin: 0 auto;
+            border-radius: 100%;
+            background-color: $overlay-gray;
             width: 15%;
             height: 15%;
-            background-color: #333;
-            border-radius: 100%;
+            content: "";
             -webkit-animation: circleFadeDelay 1.2s infinite ease-in-out both;
-            animation: circleFadeDelay 1.2s infinite ease-in-out both;
         }
     }
 
@@ -27,13 +29,13 @@
         $rotation: 30deg * ($i - 1);
         $delay: -1.3s + $i * .1;
         .circle#{$i} {
-            -webkit-transform: rotate($rotation);
-            -ms-transform: rotate($rotation);
             transform: rotate($rotation);
+            -ms-transform: rotate($rotation);
+            -webkit-transform: rotate($rotation);
         }
         .circle#{$i}:before {
-            -webkit-animation-delay: $delay;
             animation-delay: $delay; 
+            -webkit-animation-delay: $delay;
         }
     }
 
@@ -42,4 +44,4 @@
 @keyframes circleFadeDelay {
     0%, 39%, 100% { opacity: 0; }
     40% { opacity: 1; } 
-}
\ No newline at end of file
+}