vite-plugin-app-loading

English | 中文

Add a loading animation to your website

Installation

npm i vite-plugin-app-loading -D

Usage

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

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

Hide the loading animation at the right time:

// 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:

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

• In your tsconfig.json add the following to your compilerOptions.types array:

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

Custom animations

Create a loading.html file at the root directory:

<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

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.