Customizable Vue and Nuxt Preloader Library

Vue Preloaders

Stable, Flexible and Fully Customizable Vue and Nuxt 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.
• Stable in Nuxt’s asyncData:
  • on SSR, asyncData doesn’t break.
  • on client, asyncData works regularly.

And more!

Installation

npm install vue-preloaders --save

Mount

vue-preloaders instance is bound to this and app.

Vue

main.js

import VuePreloaders from 'vue-preloaders'
Vue.use(VuePreloaders, /*{ options }*/)

Nuxt

nuxt.config.js

{
    ...
    modules: [
        ['vue-preloaders/nuxt', /*{ 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;
}

Download Details:

Author: igaloly

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

GitHub: https://github.com/igaloly/vue-preloaders

#vuejs #vue #javascript #vue-js