This repo is not under maintenance anymore. You may fork it and continue this journey.

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.

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

• 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!

npm install vue-preloaders --save

vue-preloaders instance is bound to this and app.

main.js

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

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

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)

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 } }*/)

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 to use from 'loaders' map.

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

Element to be injected to.

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

Binds class for preloader's root element.

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

Binds style for preloader's root element.

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

Binds style for preloader's overlay element.

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

Inject component to preloader.

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

Binds style for preloader's injected component.

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

Binds props for preloader's injected component.

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

Binds style for preloader's asset wrapper element.

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

Inject src for preloader's image tag.

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

Binds style for preloader's asset element.

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

Inject text to preloader.

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

Binds style for preloader's text element.

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

Inject HTML to preloader.

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

Binds style for preloader's injected HTML element.

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

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