vite-plugin-app-loading

给网站添加一个加载动画

安装

npm i vite-plugin-app-loading -D

使用

// vite.config.ts
import AppLoading from 'vite-plugin-app-loading'

export default defineConfig({
  plugins: [
    AppLoading(),
  ],
})

在合适的时机隐藏加载动画：

// src/main.ts
import { loadingFadeOut } from 'virtual:app-loading'
loadingFadeOut()

类型

有两种方法可以告诉 TypeScript 虚拟导入的类型：

在你的 global.d.ts 文件添加下面这句：

/// <reference types="vite-plugin-app-loading/client" />

在你的 tsconfig.json 中，将以下内容添加到你的 compilerOptions.types 数组中：

{
  // ...
  "compilerOptions": {
    // ...
    "types": [
      "vite-plugin-app-loading/client"
    ]
  }
}

自定义动画

在应用根目录创建 loading.html 文件：

<style>
.loader {
  font-weight: bold;
  font-family: sans-serif;
  font-size: 30px;
  animation: l1 1s linear infinite alternate;
}
.loader:before {
  content:"Loading..."
}
@keyframes l1 {to{opacity: 0}}
</style>
<div class="loader"></div>

// vite.config.ts
import AppLoading from 'vite-plugin-app-loading'

export default defineConfig({
  plugins: [
    AppLoading('loading.html'),
  ],
})