skeleton-loader-vue

A simple, customizable skeleton loader for your vue app

Usage no npm install needed!

<script type="module">
  import skeletonLoaderVue from 'https://cdn.skypack.dev/skeleton-loader-vue';
</script>

README

skeleton-loader-vue

Loader showing skeleton view while data is being loaded to improve UX.

Sample loader


:cd: Installation

  • npm: npm install skeleton-loader-vue --save
  • yarn: yarn add skeleton-loader-vue

:rocket: Usage

You can import and register the component globally in your main.js, or import and use it in a particular component.

To register in your main.js

import Vue from 'vue';
// Import the component
import VueSkeletonLoader from 'skeleton-loader-vue';

// Register the component globally
Vue.component('vue-skeleton-loader', VueSkeletonLoader);

To register in your component

<script>
import VueSkeletonLoader from 'skeleton-loader-vue';
export default {
  components: { VueSkeletonLoader },
};
</script>

Using loader in your .vue file

<template>
  <div class="facebook-card">
    <skeleton-loader-vue
      type="circle"
      :width="200"
      :height="200"
      animation="fade"
    />
  </div>
</template>

This would give create a circle having a width and heigth of 200px and an animation of fade.

API

Props

Prop Type Default Options Description
width number, string 200 The is the width of the loader, and can be either a number or string. This property would be overridden if the size props is set
height number, string 100 The is the height of the loader, and can be either a number or string. This property would be overridden if the size props is set
size number,string This is used to give the loader the same width and height. The property would override the width and height previously set
type string 'rect' rect, circle This is the type of the loader. It could be circle or rectangle shaped
animation string 'wave' fade, wave, pulse, pulse-x, pulse-y The animation to be applied to the loader
color string rgba(0,0,0,0.12) The sets the color of the loader. It accepts all valid CSS colors (rgb, hsl, hex included)
wave-color string rgba(255, 255, 255, 0.5) The sets the color of the wave. It accepts all valid CSS colors (rgb, hsl, hex included)
rounded boolean false Add this prop to give a non-circle loader a border-radius 0f 8px
radius number,string 8 This is used to determine the border radius of the loader

Project setup

Install dependencies

  • npm: npm install
  • yarn: yarn

Start Dev Server

  • npm: npm run serve
  • yarn: yarn serve

Compiles and minifies for production

  • npm: npm run build
  • yarn: yarn build

Customize configuration

See Configuration Reference.