<script lang="ts">
import {defineComponent} from 'vue'

export default defineComponent({
  name: "Spinner",
  props: {
    size: {
      type: String as () => 's' | 'm',
      default: 'm',
      validator: (value: string) => ['s', 'm'].includes(value)
    }
  },
  computed: {
    loaderClass() {
      return `loader loader--${this.size}`
    }
  }
})
</script>

<template>
  <span :class="loaderClass"></span>
</template>

<style scoped>
.loader {
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  position: relative;
  animation: pulse 1s linear infinite;
  border-color: #6B869C;
}

/* Medium size (default) */
.loader--m {
  width: 4.8rem;
  height: 4.8rem;
  border-width: 0.5rem;
}

.loader--m:after {
  width: 4.8rem;
  height: 4.8rem;
  border-width: 0.5rem;
}

/* Small size */
.loader--s {
  width: 1.6rem;
  height: 1.6rem;
  border-width: 0.3rem;
}

.loader--s:after {
  width: 1.6rem;
  height: 1.6rem;
  border-width: 0.3rem;
}

.loader:after {
  content: '';
  position: absolute;
  border-color: #6B869C;
  border-style: solid;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: scaleUp 1s linear infinite;
}

@keyframes scaleUp {
  0% { transform: translate(-50%, -50%) scale(0) }
  60% , 100% { transform: translate(-50%, -50%) scale(1)}
}
@keyframes pulse {
  0% , 60% , 100%{ transform: scale(1) }
  80% { transform: scale(1.2)}
}
</style>