需求：loading效果设计

效果：

• progressWidth 通过 setInterval 递增，模拟加载条动画。

• 使用 linear-gradient 创建颜色从紫色 #9c6fff 到天蓝 #3de0f5 的渐变。

• 使用 transition 实现平滑过渡。

• 可通过传入 props 自定义文案或尺寸等。

<template>
  <div class="loading-container">
    <div class="loading-text">Loading··</div>
    <div class="progress-bar">
      <div class="progress-fill" :style="{ width: `${progressWidth}%` }"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const progressWidth = ref(0)
let intervalId = null

onMounted(() => {
  intervalId = setInterval(() => {
    progressWidth.value += 1
    if (progressWidth.value >= 100) {
      progressWidth.value = 0
    }
  }, 20)
})

onUnmounted(() => {
  clearInterval(intervalId)
})
</script>

<style scoped>
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px; /* 可根据实际容器调整 */
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.loading-text {
  font-size: 16px;
  margin-bottom: 8px;
  color: #333;
}

.progress-bar {
  width: 160px;
  height: 6px;
  background-color: #eee;
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(to right, #9c6fff, #3de0f5);
  border-radius: 3px;
  transition: width 0.2s ease;
}
</style>