@alkeincodes/vuejs-skeleton-loading

vuejs-skeleton-loading

The most flexible skeleton loading for VueJS

See it in action

Install package

npm install @alkeincodes/vuejs-skeleton-loading --save

Register the component globally ES6

import VSkeleton from '@alkeincodes/vuejs-skeleton-loading';
import '@alkeincodes/vuejs-skeleton-loading/dist/app.css';

Vue.use(VSkeleton);

CDN

Include the source file.

<!-- use the latest release -->
<script src="https://unpkg.com/@alkeincodes/vuejs-skeleton-loading@latest"></script>

Usage

<v-skeleton
  :content="loader"
  width="500px"
  height="300px"
  padding="16px"
/>

...

data() {
  return {
    loader: [
      {
        type: 'avatar',
        vAlignment: 'start',
        lines: [
          {
            type: 'block',
            width: '100px'
          },
          {
            type: 'block',
            width: '200px'
          },
        ]
      },
      {
        type: 'block',
        width: '500px'
      },
      {
        type: 'block',
        width: '280px'
      },
      {
        type: 'block',
        width: '130px'
      },
      {
        type: 'row',
        marginTop: '32px',
        children: [
          {
            type: 'text',
            height: '16px',
          },
          {
            type: 'text',
            height: '16px',
          },
          {
            type: 'text',
            height: '16px',
          },
        ]
      }
    ]
  }
}

Props

Prop	Type	Description	Default	Required
content	Object	the data object prop for your data while loading		true
width	String	main container width	auto	Optional
height	String	main container height	auto	Optional
padding	String	main container padding	16px

Block Types

block | text | round | avatar | row