vuepress-plugin-loading-overlay

Vuepress loading overlay plugin based on vue-loading-overlay

Overview

Installation

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

or

$ 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,
    }],
]

Options

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

Testing

$ yarn add vue-loading-overlay

Add this plugin as CommonJS module

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

Contributing

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request

License

MIT