<template>
  <div class="loader">
    <svg
        class="icon"
        height="200"
        p-id="1166"
        t="1676267704832"
        version="1.1"
        viewBox="0 0 1024 1024"
        width="200"
        xmlns="http://www.w3.org/2000/svg"
    >
      <path
          d="M787.009641 293.979897c21.792821-0.183795 51.922051-0.459487 53.39241-0.722051a12.826256 12.826256 0 0 0 6.642872-3.610256l58.092308-57.737846a12.589949 12.589949 0 0 0 3.662769-6.603488c0.393846-2.376205-0.131282-4.424205-1.496615-5.802666l-67.872821-67.413334c-1.352205-1.378462-3.452718-1.890462-5.77641-1.522871a12.616205 12.616205 0 0 0-6.695385 3.610256l-58.092307 57.737846a12.826256 12.826256 0 0 0-3.675898 6.669128c-0.236308 1.575385 4.030359 35.997538 3.977846 57.803488-54.350769-40.539897-114.346667-68.096-184.595692-78.336V116.36841h25.915077c2.691282 0 10.660103-3.990974 12.524308-5.356307 2.021744-1.378462 8.388923-6.445949 8.388923-8.375795V7.286154c0-1.929846-6.419692-3.807179-8.310154-5.172513-1.929846-1.352205-9.885538-2.113641-12.603077-2.113641H419.052308c-2.743795 0-11.106462 0.774564-13.049436 2.139897-1.890462 1.352205-8.756513 3.21641-8.756513 5.146257v95.310769c0 1.969231 6.892308 7.036718 8.795897 8.402051 1.929846 1.339077 10.266256 5.369436 13.036308 5.369436h24.996103v81.657436C256.761436 227.511795 91.897436 400.108308 91.897436 608.518564 91.897436 837.618872 281.888821 1024 512.380718 1024 742.859487 1024 931.577436 837.632 931.577436 608.518564c-0.026256-125.702564-55.492923-238.316308-144.567795-314.538667z m-67.413333 146.116924L530.825846 627.698872a25.665641 25.665641 0 0 1-35.551179-0.590769 25.337436 25.337436 0 0 1-0.577641-35.341129l188.783589-187.602051a25.521231 25.521231 0 0 1 18.064411-7.443692 25.665641 25.665641 0 0 1 18.051282 7.443692 25.403077 25.403077 0 0 1 0 35.905641z"
          fill="#ffffff"
          p-id="1167"
      ></path>
    </svg>
  </div>
</template>

<script lang="ts" setup>
import {watch} from "vue";

const props = defineProps({
  loading: {
    type: Boolean,
    default: false,
  },
});

watch(
    () => props.loading,
    (v) => {
      const el: HTMLElement = document.querySelector("body") as HTMLElement;
      if (v) {
        el.classList.add("loading");
      } else {
        el.classList.remove("loading");
      }
    }
);
</script>

<style scoped>
.loader::before {
  top: 50%;
  left: 50%;
  z-index: 2;
  content: "";
  width: 100vmax;
  height: 100vmax;
  position: fixed;
  border-radius: 66%;
  background: var(--lime-soap);
  transition: transform 0.5s cubic-bezier(0, 0, 0.5, 1.25);
  transform: translate(-50%, -50%) scale(0);
}

.loader svg {
  top: 50%;
  left: 50%;
  opacity: 0;
  z-index: 3;
  height: 8em;
  color: white;
  position: fixed;
  visibility: hidden;
  transform: translate(-50%, -50%) scale(0);
  transition: opacity 0.3s, transform 0.5s cubic-bezier(0.5, 0, 0.5, 1.5),
  visibility 0.3s;
}
</style>
