Skip to content

xh4528/vite-plugin-loading-indicator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Loading indicator plugin for Vite

Show fancy loading indicator while page is loading!
Inspired by nuxtjs

Install

with yarn

yarn add vite-plugin-loading-indicator -D

with npm

npm install vite-plugin-loading-indicator -D

How to use

vite.config.ts or vite.config.js

import LoadingIndicator from "vite-plugin-loading-indicator";

export default defineConfig({
  plugins: [LoadingIndicator({})]
  ...
))

options

name

default:"circle"
desc:These indicators are imported from the awesome SpinKit project. You can use its demo page to preview spinners.

  • circle
  • cube-gri
  • fading-circl
  • folding-cub
  • chasing-dot
  • puls
  • rectangle-bounc
  • rotating-plan
  • three-bounc
  • wandering-cube

custom indicators example:
name:"loading/custom.html"(base on Project Root)
custom.html structure like

<style>
body, html, #<%= options.mountId %> {
  background: <%= options.background %>;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
}
.sk-circle .sk-child{
  ...
  background-color: <%= options.color %>;
}
</style>

<div class="sk-circle">
  ...
  <div class="sk-child"></div>
</div>

color

default:"black"
desc:indicators color

background

default:"white"
desc:background color

mountId

default:"#app"
desc:vue mount point id

About

Loading indicator plugin for Vite

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published