66 lines
1.2 KiB
Vue
66 lines
1.2 KiB
Vue
<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>
|