skeleton-loader-vue

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

Customize configuration

See Configuration Reference.