<template>
  <div class="lds-dual-ring" :class="size"></div>
</template>

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

export default defineComponent({
  props: {
    size: {
      type: String as PropType<'extra-big' | 'big' | 'medium' | 'small'>,
      default: 'medium',
    },
  },
});
</script>

<style lang="scss">
.small {
  width: 16px;
  height: 16px;

  &:after {
    width: 13px;
    height: 13px;

    border: 1px solid currentColor;
  }
}

.medium {
  width: 20px;
  height: 20px;

  &:after {
    width: 16px;
    height: 16px;

    border: 1px solid currentColor;
  }
}

.big {
  width: 30px;
  height: 30px;

  &:after {
    width: 21px;
    height: 21px;

    border: 1px solid currentColor;
  }
}

.extra-big {
  width: 40px;
  height: 40px;

  &:after {
    width: 29px;
    height: 29px;

    border: 1px solid currentColor;
  }
}

.lds-dual-ring {
  display: grid;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.lds-dual-ring:after {
  display: block;

  border-color: currentColor transparent currentColor transparent;
  border-radius: 50%;

  animation: lds-dual-ring 1s linear infinite;

  content: ' ';
}

@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
