使用 Vue 创建一个简单的 Loading 动画

使用 Vue 创建一个简单的 Loading 动画

1. 开始之前

确保

• 正确安装了 Vue 3
• 知道如何启动一个新的 Vue 项目（或在项目中使用Vue）
• 了解 Vue 3 的 Composition API（本文将使用）

2. 设计组件

该组件应该包含三个部分

• 控制逻辑
• 旋转的圆圈动画（或其他任何循环动画）
• 进度条动画

2.1 逻辑部分

我使用 Vue 的 onMounted 生命周期钩子来模拟进度。我的策略是，如果加载仍在进行，则提供虚假的加载进度。

<script setup lang="ts">
import { ref, onMounted } from "vue";
const loading = ref(true);
const wid = ref(5);

// 异步延迟
const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));

// 为完成加载时提供假进度
onMounted(async () => {
  await sleep(500);
  if (loading.value) wid.value = 20;

  await sleep(1000);
  if (loading.value) wid.value = 75;

  await sleep(2000);
  if (loading.value) wid.value = 95;
});

// 完成加载时一步到位
document.onreadystatechange = async () => {
  // 当文档完全加载完成
  if (document.readyState === "complete") {
    const loadingElement = document.getElementById("loading")!;
    const mainContent = document.getElementById("main-container")!;

    // 停止加载
    loading.value = false;
    wid.value = 100;

    // 显示正常页面
    await sleep(1000);
    loadingElement.style.opacity = "0";
    document.body.style.background = "";
    mainContent.style.display = "";

    // 删除 loading 元素
    await sleep(1000);
    loadingElement.remove();
  }
};
</script>

2.2 模板部分

2.3 样式部分

---

版权声明

版权声明：加载动画修改自 Traf 和 Codrin Pavel，在 MIT 许可下使用。

效果