<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 rem where 16px = 1rem */
  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">
@include loader();
</style>
