Animated Skeleton Loading Component - vue-content-loader

Install & Download:

# Yarn
$ yarn add vue-content-loader
# NPM
$ npm i vue-content-loader

Description:

A Vue component for animated loading skeleton screens, aiming to replace usual loading components and deliver better experiences for users.

How to use it:

1. Import and register loaders.

import {
  ContentLoader,
  FacebookLoader,
  CodeLoader,
  BulletListLoader,
  InstagramLoader,
  ListLoader,
} from 'vue-content-loader'

export default {
  components: {
    ContentLoader,
    // ...
  },
}

2. Add the content-loader component to the template.

<template>
  <content-loader></content-loader>
</template>

3. Available component props.

width: {
  type: [Number, String],
},
height: {
  type: [Number, String],
},
viewBox: {
  type: String,
},
preserveAspectRatio: {
  type: String,
  default: 'xMidYMid meet',
},
speed: {
  type: Number,
  default: 2,
},
baseUrl: {
  type: String,
  default: '',
},
primaryColor: {
  type: String,
  default: '#f9f9f9',
},
secondaryColor: {
  type: String,
  default: '#ecebeb',
},
primaryOpacity: {
  type: Number,
  default: 1,
},
secondaryOpacity: {
  type: Number,
  default: 1,
},
uniqueKey: {
  type: String,
},
animate: {
  type: Boolean,
  default: true,
},