Vuepress-plugin-loading-overlay NPM

vuepress-plugin-loading-overlay

Vuepress loading overlay plugin based on vue-loading-overlay

vuepress-plugin-loading-overlay

$ npm install --save-dev vuepress-plugin-loading-overlay

$ yarn add -D vuepress-plugin-loading-overlay

then add plugin to your vuepress config config.js

...
plugins: [
    ['vuepress-plugin-loading-overlay', {
        loader: 'spinner',
        timeout: 500,
    }],
]

Option	Type	Default	Description
timeout	Number	`250`	A number of millisecond that the loading indicator is displayed

You can pass the options of vue-loading-overlay as well.

Option	Type	Default	Description
active	Boolean	`false`	Show loading by default when `true`, use the `.sync` modifier to make it two-way binding
canCancel	Boolean	`false`	Allow user to cancel by pressing ESC or clicking outside
onCancel	Function	`()=>{}`	Do something upon cancel, works in conjunction with `can-cancel`
isFullPage	Boolean	`true`	When `false`; limit loader to its container^
transition	String	`fade`	Transition name
color	String	`#000`	Customize the color of loading icon
height	Number	*	Customize the height of loading icon
width	Number	*	Customize the width of loading icon
loader	String	`spinner`	Name of icon shape you want use as loader, `spinner` or `dots` or `bars`
backgroundColor	String	`#fff`	Customize the overlay background color
opacity	Number	`0.5`	Customize the overlay background opacity
zIndex	Number	`9999`	Customize the overlay z-index
enforceFocus	Boolean	`true`	Force focus on loader
lockScroll	Boolean	`false`	Freeze the scrolling during full screen loader
blur	String	`2px`	Value for the CSS blur backdrop-filter. Set to null or an empty string to disable blurring

$ yarn add vue-loading-overlay

Add this plugin as CommonJS module

plugins: [
    [require('../vuepress-plugin-loading-overlay'), {}],
]

MIT

5 years ago