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