Added spinner

src/components/App.vue

@@ -104,4 +104,41 @@ textarea {
     }
   }
 }
+
+$r: 9px;
+$d: $r * 2;
+$t: 1500ms;
+
+.spinner {
+  width: $d;
+  height: $d;
+  display: block;
+  position: relative;
+  border: $d/10 solid currentColor;
+  border-radius: 50%;
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    display: block;
+    width: $d/10;
+    background-color: currentColor;
+    border-radius: ($d/10)/2;
+    transform-origin: 50% 0;
+  }
+
+  &::before {
+    height: $r - $d/5;
+    left: $r - $d/10 - $d/20;
+    top: 50%;
+    animation: spin $t linear infinite;
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 </style>

src/components/NavigationBar.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="navigation-bar" v-bind:class="{'navigation-bar--editor': showEditor}">
-    <div class="navigation-bar__inner navigation-bar__inner--right">
+    <div class="navigation-bar__inner navigation-bar__inner--right flex flex--row">
+      <div class="navigation-bar__spinner">
+        <div class="spinner"></div>
+      </div>
       <div class="navigation-bar__title navigation-bar__title--text text-input" v-bind:style="{maxWidth: titleMaxWidth + 'px'}"></div>
       <input class="navigation-bar__title navigation-bar__title--input text-input" v-bind:class="{'navigation-bar__title--focused': titleFocused, 'navigation-bar__title--scrolling': titleScrolling}" v-bind:style="{maxWidth: titleMaxWidth + 'px'}" @focus="editTitle(true)" @blur="editTitle(false)" @keyup.enter="submitTitle()" @keyup.esc="submitTitle(true)" v-model.lazy.trim="title">
     </div>
@@ -128,6 +131,8 @@ export default {
 </script>
 
 <style lang="scss">
+@import 'common/variables.scss';
+
 .navigation-bar {
   position: absolute;
   width: 100%;
@@ -141,19 +146,16 @@ export default {
   float: right;
 }
 
-$navbar-button-color: rgba(255, 255, 255, 0.67);
-$navbar-button-hover-background: #484848;
-
 .navigation-bar__button {
   display: inline-block;
   width: 34px;
-  padding: 6px 5px;
+  padding: 6px;
 }
 
 .navigation-bar__title,
 .navigation-bar__button {
   display: inline-block;
-  color: $navbar-button-color;
+  color: $navbar-color;
   background-color: transparent;
   font-weight: 400;
 }
@@ -163,8 +165,8 @@ $navbar-button-hover-background: #484848;
   &:active,
   &:focus,
   &:hover {
-    color: #fff;
+    color: $navbar-hover-color;
-    background-color: $navbar-button-hover-background;
+    background-color: $navbar-hover-background;
   }
 }
 
@@ -199,4 +201,9 @@ $navbar-button-hover-background: #484848;
     cursor: text;
   }
 }
+
+.navigation-bar__spinner {
+  margin: 10px 5px 0;
+  color: rgba(255, 255, 255, 0.33);
+}
 </style>

src/components/common/variables.scss

@@ -8,6 +8,9 @@ $code-border-radius: 2px;
 $link-color: #4a80cf;
 $border-radius-base: 2px;
 $hr-color: rgba(128, 128, 128, 0.2);
+$navbar-color: rgba(255, 255, 255, 0.67);
+$navbar-hover-color: #fff;
+$navbar-hover-background: #484848;
 
 $editor-color: rgba(0, 0, 0, 0.8);
 $editor-color-light: rgba(0, 0, 0, 0.28);