<template>
  <div class="loader"
  v-bind:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
  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 */
  props: {
    sizeInRem: {
      type: Number,
      default: 1
    },
    /* Color options: red, green, blue, white, black */
    loaderColor: {
      type: String
    },
    /* Position options: center, right, left (OPTIONAL) */
    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: 100%;
    height: 100%;
    animation: rotation 1s infinite linear;
    @keyframes rotation {
      100% {
        transform:rotate(360deg);
      }
    }
  }
  //Spinner position
  &.center {
    left: 0;
    right: 0;
    margin: 0 auto;
  }
  &.right {
    margin: 0 0 0 auto;
  }
  &.left {
    margin: 0 auto 0 0;
  }
  //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>
