commit

src/ux-components/loader/loader.vue

@@ -0,0 +1,90 @@
+<template>
+    <div
+      class="loader"
+      role="alert"
+      aria-label="Loading new page"
+      v-bind:class="[this.loaderColor, this.loaderPosition]"
+    ></div>
+  </template>
+  
+  <script>
+  export default {
+    name: "loader",
+    /* Specify size in number value which translates to rem value. For example, 1.5 = 1.5rem = 24px */
+    props: {
+      /* Color options: red, green, blue, white, black */
+      loaderColor: {
+        type: String,
+      },
+      /* Position options: center, right, left (OPTIONAL, do NOT use on btn-* classes) */
+      loaderPosition: {
+        type: String,
+      },
+    },
+  };
+  </script>
+  
+  <style lang="scss">
+  .loader {
+    display: flex;
+    //Open an overlay to prevent page interaction
+    &:before {
+      content: "";
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background-color: transparent;
+      z-index: 9999;
+      cursor: default;
+    }
+    //Spinner basics
+    &:after {
+      content: "";
+      mask: url(../../assets/img/icons/spinner.svg);
+      mask-size: cover;
+      position: relative;
+      width: 1rem;
+      height: 1rem;
+      animation: rotation 1s infinite linear;
+      @keyframes rotation {
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+    }
+    //Spinner position
+    &.center {
+      position: absolute;
+      right: 50%;
+      transform: translateX(50%);
+    }
+    &.right {
+      position: absolute;
+      right: 1rem;
+    }
+    &.left {
+      position: absolute;
+      left: 1rem;
+    }
+    //Spinner color
+    &:after {
+      //Default spinner color (blue) if no other color is specified from the options below
+      background-color: $blue;
+    }
+    &.red:after {
+      background-color: $red;
+    }
+    &.green:after {
+      background-color: $green;
+    }
+    &.white:after {
+      background-color: $white;
+    }
+    &.black:after {
+      background-color: $black;
+    }
+  }
+  </style>
+