English | 中文

Add a loading animation to your website

npm i vite-plugin-app-loading -D

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

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

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

Fantastic-admin

Thanks to vue-vben-admin for the inspiration.