skeleton-loader-vue
Loader showing skeleton view while data is being loaded to improve UX.
💿 Installation
- npm:
npm install skeleton-loader-vue --save - yarn:
yarn add skeleton-loader-vue
🚀 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">
<vue-skeleton-loader
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