README
skeleton-loader-vue
Loader showing skeleton view while data is being loaded to improve UX.
: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
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
<script>
import VueSkeletonLoader from 'skeleton-loader-vue';
export default {
components: { VueSkeletonLoader },
};
</script>
Using loader in your .vue
file
<template>
<div class="facebook-card">
<skeleton-loader-vue
type="circle"
:width="200"
:height="200"
animation="fade"
/>
</div>
</template>
This would give create a circle having a width and heigth of 200px and an animation of fade.
API
Props
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
Install dependencies
- npm:
npm install
- yarn:
yarn
Start Dev Server
- npm:
npm run serve
- yarn:
yarn serve
Compiles and minifies for production
- npm:
npm run build
- yarn:
yarn build