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

// 定义 loader 相关的 DOM 引用
const loaderRef = ref<HTMLElement | null>(null)
const loaderBarRef = ref<HTMLElement | null>(null)

// 暴露这两个 ref 供外部使用
defineExpose({
  loaderRef,
  loaderBarRef
})
</script>

<template>
  <div ref="loaderRef" class="page-loader" aria-hidden="true" v-once>
    <div class="page-loader-content">
      <p>Loading</p>
      <span class="page-loader-line">
        <span ref="loaderBarRef" class="page-loader-line-inner" />
      </span>
    </div>
  </div>
</template>

<style scoped>
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  color: #fff;
  background: #000;
  will-change: transform;
}

.page-loader-content {
  width: min(220px, calc(100vw - 48px));
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.page-loader-content p {
  margin: 0 0 14px;
}

.page-loader-line {
  display: block;
  width: 100%;
  height: 1px;
  overflow: hidden;
  background: rgb(255 255 255 / 20%);
}

.page-loader-line-inner {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
}
</style>
