使用 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 模板部分

<template>
  <div id="loading">
    <!-- 转动加载 -->
    <div class="load">
      <hr />
      <hr />
      <hr />
      <hr />
    </div>
    <!-- 进度条 -->
    <div class="progress">
      <div class="progress-value" :style="{ width: wid + '%' }"></div>
    </div>
  </div>
</template>