Adpative Skeleton Loading Component For Vue.js

Install & Download:

# Yarn
$ yarn add vue-loading-skeleton
# NPM
$ npm install vue-loading-skeleton --save

Description:

A lightweight and themeable skeleton loader component that automatically adapts to your app content.

How to use it:

1. Install and import.

import Skeleton from 'vue-loading-skeleton';

2. Wrap your content in the skeleton loader component.

<div class="item">
  <div class="item__photo">
    <PuSkeleton circle height="50px">
      {{ props.data.img }}
    </PuSkeleton>
  </div>
  <div class="item__meta">
    <div class="item__title">
      <PuSkeleton>{{ props.data.title }}</PuSkeleton>
    </div>
    <div class="item__info">
      <PuSkeleton :count="2">{{ props.data.body }}</PuSkeleton>
    </div>
  </div>
</div>

3. Available props.

prefix: {
  type: String,
  default: 'pu'
},
count: {
  type: Number,
  default: 1
},
duration: {
  type: Number,
  default: 1.5
},
tag: {
  type: String,
  default: 'span'
},
width: [String, Number],
height: [String, Number],
circle: Boolean,
loading: undefined&gt

4. Available theme props.

color: {
  type: String,
  default: DEFAULT_BACKGROUND
},
highlight: {
  type: String,
  default: DEFAULT_HIGHLIGHT
},
duration: {
  type: Number,
  default: 1.5
},
tag: {
  type: String,
  default: 'div'
},
loading: {
  type: Boolean,
  default: undefined
}