<script setup lang="ts">
const loadingProps = defineProps({
  state: {
    type: Boolean,
    default: false,
    required: true
  }
});
</script>

<template>
  <div v-if="loadingProps.state" id="partialLoading" class="loading">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="25 25 50 50" class="circular">
      <circle cx="50" cy="50" r="20" fill="none" class="path" />
    </svg>
  </div>
</template>

<style scoped lang="scss">
.loading {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9998;
  background: rgba(255, 255, 255, 0.4) no-repeat center;
  .circular {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -21px;
    margin-left: -21px;
    height: 32px;
    width: 32px;
    animation: anim-rotate 2s linear infinite;
    .path {
      animation: anim-path 1.5s ease-in-out infinite;
      stroke-dasharray: 90, 150;
      stroke-dashoffset: 0;
      stroke-width: 2;
      stroke: var(--o-color-primary);
      stroke-linecap: round;
    }
  }

  @keyframes anim-rotate {
    to {
      transform: rotate(1turn);
    }
  }

  @keyframes anim-path {
    0% {
      stroke-dasharray: 1, 200;
      stroke-dashoffset: 0;
    }
    50% {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -40px;
    }
    100% {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -120px;
    }
  }
}
</style>