<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>
