vue2-preloader

Preloader plugin for Vue.js 2 allows you to use the preloader anywhere on site

Features:

• Using multiple independent preloaders per page
• Customization of each preloader: a unique image and/or css classes for each preloader
• Dependence of preloader activity on several parameters

Installation

$ npm install @phoenix91/vue2-preloader --save

import Vue from 'vue'
import preloader from '@phoenix91/vue2-preloader';

Vue.use(preloader);

After installation <preloader /> component will become available for use

Usage

Component properties

The component vue2-prealoder has several options for customization

| Name | Type | Default | |----------------|---------|--------------------------------------| | wrapperClass | String | 'preloader' | | imgClass | String | 'preloader__img' | | imgSrc | String | base64-code of example preloader |

The HTML template of preloader has the next structure

div > img

Specifying property values during installation

When installing the preloader, you can specify the default property values

Example:

import Vue from 'vue'
import preloader from '@phoenix91/vue2-preloader';

Vue.use(preloader, {
    wrapperClass: 'my-wrapper-preloader-class',
    imgClass: 'my-img-preloader-class',
    imgSrc: '/path-to-img.jpg',
});

Instead of the address to the image, you can use the base64-code of the image

Example:

import Vue from 'vue'
import preloader from '@phoenix91/vue2-preloader';

Vue.use(preloader, {
    imgSrc: 'data:image/svg+xml;base64,<base64-code>',
});

Component functions

The component vue2-prealoder has several functions

• setLockPreloader(sPreloaderName) - set/add block of content and show preloader
• unsetLockPreloader(sPreloaderName) - unset/reduce block of content and hide preloader
• isActivePreloader(sPreloaderName) - check preloader activity

The preloader can depend on several parameters. For example, you want the preloader to be shown until a response from the server for 2 requests is received. To do this, when sending these requests, set the lock twice using the setLockPreloader function. When receiving a response from the server, unset the lock using the unsetLockPreloader function

Example:

// first request
this.setLockPreloader('main-preloader');
axios.request({})
    .then(() => {
    })
    .finally(() => {
        this.unsetLockPreloader('main-preloader');
    });

// second request
this.setLockPreloader('main-preloader');
axios.request({})
    .then(() => {
    })
    .finally(() => {
        this.unsetLockPreloader('main-preloader');
    });

To use the finally, use package https://www.npmjs.com/package/promise.prototype.finally

Using preloader in html

Use the <preloader /> tag and the isActivePreloader function to show/hide the preloader and hide/show the content

Example:

<preloader v-if="isActivePreloader('main-preloader')" />
<div v-else></div>

Using multiple independent preloaders per page

Example:

<preloader v-if="isActivePreloader('main-preloader')" />
<div v-else></div>

<preloader v-if="isActivePreloader('menu-preloader')" />
<div v-else></div>

<preloader v-if="isActivePreloader('sidebar-preloader')" />
<div v-else></div>

Customization of each preloader

Example:

<preloader v-if="isActivePreloader('main-preloader')" wrapperClass="my-custom-wrapper-class" />

<preloader v-if="isActivePreloader('menu-preloader')" imgClass="my-custom-img-class" />

<preloader v-if="isActivePreloader('sidebar-preloader')" imgSrc="/path-to-custom-img" />

Attributes of the <preloader /> tag has a higher priority than the default properties

License

MIT