DEMO

Installation

npm i vue-json-skeleton-loader

Plugin

import VSkeletonLoader from 'vue-json-skeleton-loader';
import 'vue-json-skeleton-loader/dist/style.css';

Vue.use(VSkeletonLoader);

Component

Content

You can implement multiple types of skeleton loaders simultaneously using content property.

<template>
  <v-skeleton-loader :content="thumbItem"></v-skeleton-loader>
</template>

<script>
  import VSkeletonLoader from 'vue-json-skeleton-loader'
  export default {
    components: {
      VSkeletonLoader
    },
    data() {
      return {
        thumbItem: ['box', 'text']
      }
    }
  }
</script>

<template>
  <v-skeleton-loader :content="cardItem"></v-skeleton-loader>
</template>

<script>
  import VSkeletonLoader from 'vue-json-skeleton-loader'
  export default {
    components: {
      VSkeletonLoader
    },
    data() {
      return {
        cardItem: [['blank', 'circle:100', 'blank'], ['title'], ['text:3']]
      }
    }
  }
</script>

Options

Options allow you to implement different styles of Skeleton Loaders.

<v-skeleton-loader
  :options="{
    radius: 3,
    primaryColor: '#94bcff',
    secondaryColor: '#c7dcff',
    animate: true,
    speed: '1.5s',
    defaultSizes: {
      box: 100,
      circle: 100,
      title: 25,
      text: 15,
    }
  }"
>
</v-skeleton-loader>

📝 License

Copyright © 2022. Built by INTEGRATION Corp.
This project is distributed under MIT license.