Important!

in 2.0, nuxt module has been removed. The reason is that you don't really need it. Just use it as a vue plugin.

Vue Preloaders

Stable, Flexible and Fully Customizable Vue preloaders library.
Attach your preloader at any time, to any element easily and quickly.

Demo

https://vue-preloaders.netlify.com/

Capabilities

• Attach a stunning preloader to any element with one line of code.
• Super simple usage with the ability to be super advanced and smart.
• Can contain:
  • Component
  • Asset
  • HTML
  • Text
  • Any of them together
• Modify props of the injected component.
• Modify any aspect of any element and their wrappers.
• Have a list of preset preloaders for easy use.
• Change options of already-opened preloader.
• Smart deepMerge between all options:
  • User default options.
  • User default loader options (loader from loaders map).
  • Open() loader options (loader from loaders map).
  • Open() options.
• Separate preloaders custom styling via custom class name.
• Customize transition.
• Close easily with returned callback.

And more!

Installation

npm install vue-preloaders --save

Mount

vue-preloaders instance is bound to this and app.

Vue

main.js

import 'vue-preloaders/dist/vue-preloaders.css'
import VuePreloaders from 'vue-preloaders'

Vue.use(VuePreloaders, /*{ options }*/)

Usage

Open

Gets: Object with options from the options list below.
Returns: callback for closing the opened preloader.

If no container was set, it will fallback to the body element.

this.$preloaders.open(/*{ options }*/)

const close = this.$preloaders.open(/*{ options }*/)
setTimeout(close, 1000)

Close

Gets: Object with container key.

If no container was set, the preloader on the body tag will be closed (if it exists).

this.$preloaders.close(/*{ options: { container } }*/)

Options

loaders

Use it only in the library init.
Map of default, preset preloaders.

{
    ...
    loaders: { //Object
        myAwesomeLoader: {
            container: '#app',
            cssStyle: { backgroundColor: 'pink' },
            overlayStyle: { opacity: 1 },
            component: MyAwesomeLoaderComponent
        },
        anotherAwesomeLoader: {
            html: '<div class="my-loader">Loader injected html</div>',
            text: 'This is my loader',
        }
    }
    ...
}

loader

Loader to use from 'loaders' map.

{
    ...
    loader: 'myAwesomeLoader' //String
    ...
}

container

Element to be injected to.

{
    ...
    container: '.class-name' //String(selector) / Element
    ...
}

cssClass

Binds class for preloader's root element.

{
    ...
    cssClass: 'test' //String
    ...
}

cssStyle

Binds style for preloader's root element.

{
    ...
    cssStyle: { dispaly: 'block' } //Object
    ...
}

overlayStyle

Binds style for preloader's overlay element.

{
    ...
    overlayStyle: { backgroundColor: 'pink', opacity: 0.5 } //Object
    ...
}

component

Inject component to preloader.

import MyAwesomeComp from '../components/MyAwesomeComp'
{
    ...
    component: MyAwesomeComp
    ...
}

componentStyle

Binds style for preloader's injected component.

{
    ...
    overlayStyle: { textAlign: 'center' } //Object
    ...
}

componentProps

Binds props for preloader's injected component.

{
    ...
    componentProps: { isCentered: true } //Object
    ...
}

assetWrapperStyle

Binds style for preloader's asset wrapper element.

{
    ...
    assetWrapperStyle: { width: '50px' } //Object
    ...
}

assetSrc

Inject src for preloader's image tag.

{
    ...
    assetSrc: 'https://www.random-image.com' //String
    ...
}

assetStyle

Binds style for preloader's asset element.

{
    ...
    assetStyle: { width: '100%', maxWidth: '30px' } //Object
    ...
}

text

Inject text to preloader.

{
    ...
    text: 'My text' //String
    ...
}

textStyle

Binds style for preloader's text element.

{
    ...
    textStyle: { textAlign: 'center' } //Object
    ...
}

html

Inject HTML to preloader.

{
    ...
    html: '<div class="my-class">Test</div>' //String
    ...
}

htmlStyle

Binds style for preloader's injected HTML element.

{
    ...
    htmlStyle: { backgroundColor: 'orange' } //Object
    ...
}

Transition

Customize the transition of the preloader.
More info: https://vuejs.org/v2/guide/transitions.html

Transition name is: preloaders

/* Default Transition */ 

.preloaders-enter-active, .preloaders-leave-active {
    transition: opacity 150ms;
}
.preloaders-enter, .preloaders-leave-to {
    opacity: 0;
}

Please make sure when you edit the transition classes, that the specificity is higher.
More info: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Have fun! :)