Animated Skeleton Loading Component – vue-content-loader

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,
},

Preview:

Download Details:

Author: egoist

Live Demo: https://codesandbox.io/s/vue-content-loader-igfyf?file=/src/App.vue

Download Link: https://github.com/egoist/vue-content-loader/archive/refs/heads/master.zip

Official Website: https://github.com/egoist/vue-content-loader

Install & Download:

# Yarn
$ yarn add vue-content-loader

# NPM
$ npm i vue-content-loader