skeleton-loader-vue

> Loader showing skeleton view while data is being loaded to improve UX.

!Sample loader

---

:cd: Installation

* npm: npm install skeleton-loader-vue --save
* yarn: yarn add skeleton-loader-vue

:rocket: Usage

You can import and register the component globally in your main.js, or import and use it in a particular component.

To register in your main.js
``javascript
import Vue from 'vue';
// Import the component
import VueSkeletonLoader from 'skeleton-loader-vue';

// Register the component globally
Vue.component('vue-skeleton-loader', VueSkeletonLoader);
`

To register in your component
`vue

`

Using loader in your .vue file

`vue

`

This would give create a circle having a width and heigth of 200px and an animation of fade.

API

$3

|Prop|Type|Default|Options|Description|
|---|---|---|---|---|
|width|number, string|200||The is the width of the loader, and can be either a number or string. This property would be overridden if the size props is set|
|height|number, string|100||The is the height of the loader, and can be either a number or string. This property would be overridden if the size props is set|
|size|number,string|||This is used to give the loader the same width and height. The property would override the width and height previously set|
|type|string|'rect'|rect, circle|This is the type of the loader. It could be circle or rectangle shaped|
|animation|string|'wave'|fade, wave, pulse, pulse-x, pulse-y|The animation to be applied to the loader|
|color|string|rgba(0,0,0,0.12)||The sets the color of the loader. It accepts all valid CSS colors (rgb, hsl, hex included)|
|wave-color|string|rgba(255, 255, 255, 0.5)||The sets the color of the wave. It accepts all valid CSS colors (rgb, hsl, hex included)|
|rounded|boolean|false||Add this prop to give a non-circle loader a border-radius 0f 8px|
|radius|number,string|8||This is used to determine the border radius of the loader|

Project setup

$3

* npm: npm install
* yarn: yarn

$3

* npm: npm run serve
* yarn: yarn serve

$3

* npm: npm run build
* yarn: yarn build`

$3

See Configuration Reference.