From 69a69ad0c9eba182bb51974c9a2c592026fa5245 Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Tue, 17 Dec 2019 14:02:59 +0530
Subject: [PATCH] migrate loading spinner

---
 .../_new/generic/BaseButton/BaseButton.vue    |  2 +-
 .../LoadingSpinner/LoadingSpinner.story.js    | 11 ++++
 .../generic/LoadingSpinner/LoadingSpinner.vue | 56 +++++++++++++++++++
 3 files changed, 68 insertions(+), 1 deletion(-)
 create mode 100644 webapp/components/_new/generic/LoadingSpinner/LoadingSpinner.story.js
 create mode 100644 webapp/components/_new/generic/LoadingSpinner/LoadingSpinner.vue

diff --git a/webapp/components/_new/generic/BaseButton/BaseButton.vue b/webapp/components/_new/generic/BaseButton/BaseButton.vue
index 8d2e52cf9..cd9da5f91 100644
--- a/webapp/components/_new/generic/BaseButton/BaseButton.vue
+++ b/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>
diff --git a/webapp/components/_new/generic/LoadingSpinner/LoadingSpinner.story.js b/webapp/components/_new/generic/LoadingSpinner/LoadingSpinner.story.js
new file mode 100644
index 000000000..d61f02db4
--- /dev/null
+++ b/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 />',
+  }))
diff --git a/webapp/components/_new/generic/LoadingSpinner/LoadingSpinner.vue b/webapp/components/_new/generic/LoadingSpinner/LoadingSpinner.vue
new file mode 100644
index 000000000..98e7dc200
--- /dev/null
+++ b/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>