migrate loading spinner

webapp/components/_new/generic/BaseButton/BaseButton.vue

@@ -1,6 +1,6 @@
 <template>
   <button :class="buttonClass" :disabled="loading">
-    <ds-spinner v-if="loading" />
+    <ds-spinner size="small" v-if="loading" />
     <base-icon v-if="icon" :name="icon" />
     <slot />
   </button>

webapp/components/_new/generic/LoadingSpinner/LoadingSpinner.story.js

@@ -0,0 +1,11 @@
+import { storiesOf } from '@storybook/vue'
+import helpers from '~/storybook/helpers'
+import LoadingSpinner from './LoadingSpinner.vue'
+
+storiesOf('Generic/LoadingSpinner', module)
+  .addDecorator(helpers.layout)
+
+  .add('default', () => ({
+    components: { LoadingSpinner },
+    template: '<loading-spinner />',
+  }))

webapp/components/_new/generic/LoadingSpinner/LoadingSpinner.vue

@@ -0,0 +1,56 @@
+<template>
+  <svg
+    viewBox="0 0 50 50"
+    class="loading-spinner"
+  >
+    <circle
+      cx="25"
+      cy="25"
+      r="20"
+      class="circle"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'LoadingSpinner',
+}
+</script>
+
+<style lang="scss">
+.loading-spinner {
+  height: 36px;
+  overflow: hidden;
+  stroke: currentColor;
+  animation: rotate 16s linear infinite;
+
+  > .circle {
+    fill: none;
+    stroke-width: 5;
+    stroke-linecap: round;
+    animation: dash 1.5s ease-in-out infinite;
+  }
+}
+
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(2160deg);
+  }
+}
+</style>