<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>