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