vite-plugin-app-loading


English | 中文

Add a loading animation to your website

!vite-plugin-app-loading

Installation

``bash
npm i vite-plugin-app-loading -D
`

Usage

`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()
`

Types

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"
]
}
}
`

Custom animations

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

Example

Fantastic-admin

Thanks

Thanks to vue-vben-admin for the inspiration.