<template>
  <div class="loader">
    <div class="wrapper">
      <span></span>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  setup() {},
});
</script>

<style scoped lang="scss">
.loader {
  --size: 24px;
  --half: calc(var(--size) / 2);

  .wrapper {
    height: var(--size);
    width: var(--size);
    -webkit-animation: loader-1 4.8s linear infinite;
    animation: loader-1 4.8s linear infinite;

    span {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      height: var(--size);
      width: var(--size);
      clip: rect(0, var(--size), var(--size), var(--half));
      -webkit-animation: loader-2 1.2s linear infinite;
      animation: loader-2 1.2s linear infinite;

      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        height: var(--size);
        width: var(--size);
        clip: rect(0, var(--size), var(--size), var(--half));
        border: 3px solid var(--loader-color);
        border-radius: 50%;
        -webkit-animation: loader-3 1.2s cubic-bezier(0.77, 0, 0.175, 1)
          infinite;
        animation: loader-3 1.2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
      }

      &.blue::after {
        border: 3px solid var(--blue);
      }
    }
  }
}

@-webkit-keyframes loader-1 {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes loader-1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes loader-2 {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(220deg);
  }
}
@keyframes loader-2 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(220deg);
  }
}

@-webkit-keyframes loader-3 {
  0% {
    -webkit-transform: rotate(-140deg);
  }
  50% {
    -webkit-transform: rotate(-160deg);
  }
  100% {
    -webkit-transform: rotate(140deg);
  }
}
@keyframes loader-3 {
  0% {
    transform: rotate(-140deg);
  }
  50% {
    transform: rotate(-160deg);
  }
  100% {
    transform: rotate(140deg);
  }
}
</style>
