[](https://www.npmjs.com/package/vite-plugin-app-loading)
npm install vite-plugin-app-loading
English | 中文
Add a loading animation to your website
``bash`
npm i vite-plugin-app-loading -D
`ts
// vite.config.ts
import AppLoading from 'vite-plugin-app-loading'
export default defineConfig({
plugins: [
AppLoading(),
],
})
`
Hide the loading animation at the right time:
`ts`
// src/main.ts
import { loadingFadeOut } from 'virtual:app-loading'
loadingFadeOut()
There are two ways of telling typescript about the types of the virtual import:
- In your global.d.ts file add the following line:
`ts`
///
- In your tsconfig.json add the following to your compilerOptions.types array:
`json`
{
// ...
"compilerOptions": {
// ...
"types": [
"vite-plugin-app-loading/client"
]
}
}
Create a loading.html file at the root directory:
`html`
`ts
// vite.config.ts
import AppLoading from 'vite-plugin-app-loading'
export default defineConfig({
plugins: [
AppLoading('loading.html'),
],
})
``

> [!TIP]
> You can find inspiration from the following websites, which all provide CSS-only loading animations that are perfect for use with this plugin.
>
> - CSS Loaders
> - CSS Loader Generator
> - Loaders
Thanks to vue-vben-admin for the inspiration.