Add animated loading graphic

app/components/loading-spinner/template.hbs

@@ -1,3 +1,14 @@
+<p>
+  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+       version="1.1" x="0px" y="0px" viewBox="0 0 132 100"
+       enable-background="new 0 0 100 100" xml:space="preserve">
+    <path id="path-comet" 
+          d="M79.062,24.173L79.062,24.173l-0.021-0.011c-0.068-0.03-0.137-0.062-0.204-0.093L42.392,7.337
+             c0,0,3.065,14.104,4.458,18.019l0,0c0,0-41.754-12.481-46.85-13.67c1.67,6.52,30.607,62.492,30.607,62.492
+             c5.848,11.873,19.394,18.485,33.522,18.485c19.811,0,35.87-16.059,35.87-35.869C100,42.313,91.418,29.837,79.062,24.173z">
+    </path>
+  </svg>
+</p>
 <p>
   Loading data from Ethereum...
 </p>

app/router.js

@@ -7,6 +7,7 @@ const Router = Ember.Router.extend({
 });
 
 Router.map(function() {
+  this.route('spinner');
 });
 
 export default Router;

app/routes/spinner.js

@@ -0,0 +1,4 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+});

app/styles/components/_loading-spinner.scss

@@ -1,8 +1,37 @@
-.loading-spinner {
+@keyframes pulse {
+  from {
+    opacity: 0.2;
+  }
+  to {
+    opacity: 0.6;
+  }
+}
 
-  margin-top: 14rem;
+.loading-spinner {
+  margin-top: 12rem;
   text-align: center;
   font-size: 1.4rem;
   color: lightblue;
 
+  @include media($mobile) {
+    margin-top: 6rem;
+  }
+
+  svg {
+    width: 200px;
+    height: 200px;
+    margin-bottom: 2rem;
+
+    #path-comet {
+      fill: lightblue;
+      opacity: 0.6;
+
+      -moz-animation-name: pulse;
+      -moz-animation-iteration-count: infinite;
+      -moz-animation-timing-function: ease-in-out;
+      -moz-animation-direction: alternate;
+      -moz-animation-duration: 1s;
+    }
+  }
 }
+

app/templates/spinner.hbs

@@ -0,0 +1 @@
+{{loading-spinner}}

public/img/comet.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     version="1.1" x="0px" y="0px" viewBox="0 0 100 100"
+     enable-background="new 0 0 100 100" xml:space="preserve">
+  <path id="path-comet"
+        d="M79.062,24.173L79.062,24.173l-0.021-0.011c-0.068-0.03-0.137-0.062-0.204-0.093L42.392,7.337
+           c0,0,3.065,14.104,4.458,18.019l0,0c0,0-41.754-12.481-46.85-13.67c1.67,6.52,30.607,62.492,30.607,62.492
+           c5.848,11.873,19.394,18.485,33.522,18.485c19.811,0,35.87-16.059,35.87-35.869C100,42.313,91.418,29.837,79.062,24.173z">
+  </path>
+</svg>

tests/unit/routes/spinner-test.js

@@ -0,0 +1,11 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('route:spinner', 'Unit | Route | spinner', {
+  // Specify the other units that are required for this test.
+  // needs: ['controller:foo']
+});
+
+test('it exists', function(assert) {
+  let route = this.subject();
+  assert.ok(route);
+});