Use rotateplane cursor as spinner

Author: Marcel Gerber

src/styles/brackets.less

@@ -158,12 +158,13 @@ a, img {
     white-space: nowrap;
 
     > div {
-        border-left: 1px solid rgba(0, 0, 0, 0.1);
+        &:not(.spinner) {
+            border-left: 1px solid rgba(0, 0, 0, 0.1);
+        }
         float: right;
         padding: 0 10px;
     }
     .spinner {  // spinner is tiny & usually invisible; reduce margin so gap is less glaring
-        border: none;
         margin: 6px 10px;
         padding: 0;
     }
@@ -173,15 +174,6 @@ a, img {
     }
 }
 
-@-webkit-keyframes spinner-sprites-12 {
-      0% { background-position:    0px 0px; }
-    100% { background-position: -120px 0px; }
-}
-@-webkit-keyframes spinner-sprites-36 {
-      0% { background-position:    0px 0px; }
-    100% { background-position: -360px 0px; }
-}
-
 #status-indent > * {
     display: inline-block;
 }
@@ -1369,42 +1361,66 @@ textarea.exclusions-editor {
 
 .spinner {
     display: inline-block;
-    vertical-align: middle;
-    margin-top: -2px;
-    width: 12px;
-    height: 12px;
-    background: url("images/spinner_small_sprites12.png") no-repeat;
+    box-sizing: border-box;
+    width: 14px;
+    height: 14px;
+    border-left: 3px solid #78B2F2;
+    border-right: 3px solid #78B2F2;
+    overflow: hidden;
+    position: relative;
     visibility: hidden;
 
+    &:before,
+    &:after {
+        border-left: 3px solid #78B2F2;
+        border-right: 3px solid #78B2F2;
+        box-sizing: border-box;
+        content: "";
+        display: block;
+        position: absolute;
+        width: 100%;
+        height: 3px;
+        left: 0;
+    }
+    &:before {
+        top: 0;
+    }
+    &:after {
+        bottom: 0;
+    }
+
     &.spin {
-        -webkit-animation: spinner-sprites-12 1.2s steps(10) infinite;
+        -webkit-animation: spinner-rotateplane 1.2s infinite ease-in-out;
+        animation: spinner-rotateplane 1.2s infinite ease-in-out;
         visibility: visible;
     }
 
     &.large {
         width: 36px;
         height: 36px;
-        margin-top: 0;
-        background: url("images/spinner_large_sprites36.png") no-repeat;
-
-        &.spin {
-            -webkit-animation: spinner-sprites-36 1.2s steps(10) infinite;
+        border-left: 9px solid #78B2F2;
+        border-right: 9px solid #78B2F2;
+
+        &:before,
+        &:after {
+            border-left: 7px solid #78B2F2;
+            border-right: 7px solid #78B2F2;
+            height: 9px;
         }
     }
 }
-// Retina versions
-@media only screen and (-webkit-min-device-pixel-ratio: 2),
-       only screen and (min-device-pixel-ratio: 2) {
-    .spinner {
-        background-image: url("images/spinner_small_sprites12@2x.png");
-        background-size: 120px 12px;
 
-        &.large {
-            background: url("images/spinner_large_sprites36@2x.png") no-repeat;
-            background-size: 360px 36px;
-        }
-    }
+@-webkit-keyframes spinner-rotateplane {
+    0% { -webkit-transform: perspective(120px) }
+    50% { -webkit-transform: perspective(120px) rotateY(180deg) }
+    100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
 }
+@keyframes spinner-rotateplane {
+    0% { -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
+    50% { -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }
+    100% { -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); }
+}
+
 
 
 /* Problems panel & CodeInspection status bar indicator */