switch from svg to css animation

app/styles/app.scss

@@ -26,8 +26,6 @@
 @import "app/components/sync-button";
 @import "app/components/loading-indicator";
 
-@import "app/animations/booting-state";
-
 @import "app/modules/section";
 @import "app/modules/loader";
 @import "app/modules/tiles";

app/styles/app/animations/booting-state.sass

@@ -1,18 +0,0 @@
-.svg-booting
-  .bubble
-    transform-origin: center center
-    animation: bubbleScale 1.2s infinite linear
-
-  .bubble:nth-of-type(2)
-    animation-delay: 0.35s
-
-  .bubble:nth-of-type(3)
-    animation-delay: 0.7s
-
-
-@keyframes bubbleScale
-  0%, 80%, 100%
-    transform: scale(0)
-
-  40%
-    transform: scale(1.0)

app/styles/app/modules/icons.sass

@@ -129,7 +129,11 @@
   background-image: inline-image('svg/icon-job-passed.svg')
 .icon--job.errored
   background-image: inline-image('svg/icon-job-errored.svg')
-.icon--job.created
+.icon--job.started,
+.icon--job.queued,
+.icon--job.booting,
+.icon--job.received,
+.icon--job.created,
   background-image: inline-image('svg/icon-job-started.svg')
 .icon--job.canceled
   background-image: inline-image('svg/icon-job-canceled.svg')
@@ -203,3 +207,29 @@
 
 .icon-flag
   background-image: inline-image('svg/notice-flag.svg')
+
+
+.icon-receiving
+  margin: 0.3rem 0.5rem;
+  display: inline-block;
+  i
+    width: 4px
+    height: 4px
+    border-radius: 50%
+    display: inline-block
+    background-color: $start-bg-color
+    transform-origin: center center
+    animation: bubbleScale 1.2s infinite linear
+  i:nth-of-type(2)
+    animation-delay: 0.35s
+  i:nth-of-type(3)
+    animation-delay: 0.7s
+
+
+@keyframes bubbleScale
+  0%, 80%, 100%
+    transform: scale(0)
+
+  40%
+    transform: scale(1.0)
+

app/templates/components/jobs-item.hbs

@@ -1,13 +1,7 @@
 {{#link-to "job" repo job}}
   <div class="tile-status tile-status--job">
     {{#if isAnimating}}
-      <svg class="svg-booting" version="1.1" width="30" height="12" viewBox="0 0 10 10" preserveAspectRatio="xMinYMid meet">
+      <span class="icon-receiving"><i></i><i></i><i></i></span>
-        <g>
-          <circle class="bubble" fill="#CDBC2C" cx="7.686" cy="7.369" r="2"/>
-          <circle class="bubble" fill="#D6C826" cx="13.143" cy="7.369" r="2"/>
-          <circle class="bubble" fill="#D6C826" cx="2.232" cy="7.369" r="2"/>
-        </g>
-      </svg>
     {{else}}
       <span class="icon icon--job {{job.state}}"></span>
     {{/if}}