Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

vue-preloaders

1.0.13 • Public • Published

Vue Preloaders

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

vue-preloaders app use case

Demo

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

vue-preloaders form use case

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!

vue-preloaders showcase

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;
}

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! :)

Install

npm i vue-preloaders

DownloadsWeekly Downloads

69

Version

1.0.13

License

MIT

Unpacked Size

63.3 kB

Total Files

12

Last publish

Collaborators

  • avatar