Skip to content

A simple and easily customizable skeleton loader plugin for you Vue application.

License

Notifications You must be signed in to change notification settings

Abdulqudus001/vue-skeleton-loader

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

83 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

skeleton-loader-vue

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

Sample loader


💿 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

Customize configuration

See Configuration Reference.