From aada5fc2c5c9b7b9345951978aa6249bd53dc2b8 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Mon, 3 Jun 2019 23:03:09 +0200
Subject: [PATCH] Created a loader component that is the loading spinner for
 the page

---
 src/components/ui/Loader.vue | 49 ++++++++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 src/components/ui/Loader.vue

diff --git a/src/components/ui/Loader.vue b/src/components/ui/Loader.vue
new file mode 100644
index 0000000..6c97913
--- /dev/null
+++ b/src/components/ui/Loader.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="loader">
+    <i class="loader--icon">
+      <i class="loader--icon-spinner" />
+    </i>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import "./src/scss/variables";
+
+.loader {
+  display: flex;
+  width: 100%;
+  height: 30vh;
+  justify-content: center;
+  align-items: center;
+
+  &--icon{
+    border: 2px solid rgba($c-dark, 0.9);
+    border-radius: 50%;
+    display: block;
+    height: 40px;
+    // left: 50%;
+    // margin: -1.5em;
+    position: absolute;
+    width: 40px;
+
+    &-spinner {
+    // border: 2px solid transparent;
+    display: block;
+      animation: load 1s linear infinite;
+    height: 35px;
+    width: 35px;
+&:after {
+      border: 7px solid rgba($c-green, 0.9);
+      border-radius: 50%;
+      content: '';
+      left: 8px;
+      position: absolute;
+      top: 22px;
+    }
+    }
+  }
+  @keyframes load {
+    100% { transform: rotate(360deg); }
+  }
+}
+</style>
\ No newline at end of file