61 lines
1.2 KiB
Vue
61 lines
1.2 KiB
Vue
<template>
|
|
<div class="loading" ref="textBox">
|
|
<slot></slot>
|
|
<div class="loading-dot" ref="dotBox"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, nextTick, ref } from "vue";
|
|
import { gsap } from "gsap";
|
|
|
|
const dotBox = ref(null)
|
|
let tl1 = null;
|
|
const setTl1 = () => {
|
|
nextTick(() => {
|
|
let el = dotBox.value
|
|
let width = el.offsetWidth + el.parentElement.offsetWidth
|
|
let time = el.parentElement.offsetWidth / el.offsetWidth
|
|
tl1 = gsap.timeline();
|
|
tl1.to(el, time,
|
|
{
|
|
ease: "power1.in",
|
|
left: width * 1.5,
|
|
onComplete: () => {
|
|
setTimeout(() => {
|
|
tl1.restart()
|
|
}, 1000)
|
|
}
|
|
},
|
|
)
|
|
tl1.progress(0);
|
|
})
|
|
}
|
|
|
|
onMounted(() => {
|
|
setTl1()
|
|
})
|
|
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.loading {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
}
|
|
.loading-dot {
|
|
height: 200%;
|
|
aspect-ratio: .2/1;
|
|
background: radial-gradient(ellipse 150% 150% at center, #ffffff, rgba(255, 255, 255, .2), transparent);
|
|
box-shadow: 0 0 20px rgba(255, 255, 255, 1);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
transform: translate(-175%, -50%) rotate(-45deg);
|
|
}
|
|
|
|
</style> |