README.CN.md

vite-plugin-app-loading

English | 中文

给网站添加一个加载动画

安装

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'),
  ],
})

Tip

你可以从下列网站中找找灵感，它们都提供了纯 CSS 的加载动画，非常适合搭配本插件一起使用。

• CSS Loaders
• CSS Loader Generator
• Loaders

范例

Fantastic-admin

致谢

感谢 vue-vben-admin 提供的灵感。