A simple, customizable skeleton loader for your vue app
npm install skeleton-loader-vuenpm install skeleton-loader-vue --save
yarn add skeleton-loader-vue
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
type="circle"
:width="200"
:height="200"
animation="fade"
/>
`
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`