Vue3 Skeleton Loader

Creating a loading animation with an attractive appearance and in line with the app design, for a pleasant user experience.

Basic Usage

Using npm

npm install vue3-skeleton-loader

Using yarn

yarn add vue3-skeleton-loader

Using loader in your .vue file

import VueSkeletonLoader from 'vue3-skeleton-loader';
import 'vue3-skeleton-loader/dist/style.css';

<VueSkeletonLoader type="image@2"></VueSkeletonLoader>

Introduction

Skeleton loader provides a simple solution to provide loading variables in your application.
It prepares the user for content while data is fetched from the server or loaded asynchronously.

Props

Skeleton

Prop	Values	Default	Type
loading	true false	true	Boolean
If it is true, the skeleton loader will be displayed.
type	text avatar image button chip divider	text	String
It is a string that specifies the type and number of your skeleton, such as text@4, the value before @ specifies the type of skeleton and the value after that specifies the number, and if only the type is written, the value is one.
animation	wave	wave	String
The animation parameter is a string; if left empty string, no animation will be displayed. To showcase a specific animation, provide its name and globally define the corresponding keyframes.
duration	-	1.5s	String
The duration of the animation.
timingFunction	Common values for the timing-function property include: ease linear ease-in ease-out ease-in-out ...	linear	String
The timing-function property in CSS is used to specify the speed curve of an animation.
base-color	-	#0000001E	String
The background color of the skeleton.
highlight-color	-	#FFFFFF66	String
The highlight color in the skeleton animation.
border-radius	-	different for any types	String Number
The border radius of the skeleton and it's different for any type.
height	-	different for any type	String Number
The height of skeleton.
width	-	different for any types	String Number
The width of skeleton.
direction	ltr	ltr rtl	String
The direction of the animation.
skeleton-style	-	{}	Object
A custom style for individual skeleton elements.
skeleton-class-name	-	""	String
A custom class name for individual skeleton elements is used alongside default class names v-skeleton-loader-${type} and vue-skeleton-loader-bone.

Examples

Custom animation

To set a custom animation for the VueSkeletonLoader, first, register the animation globally, then pass its name to the component using the animation prop.

Troubleshooting

Skeleton gets width 0 when parent display is flex

In the example below, the issue is demonstrated. To resolve it, you can either set the style flex:1 for VueSkeletonLoader or enclose the skeleton within a div element, as shown below:

<script setup lang="ts">
  import VueSkeletonLoader from 'vue3-skeleton-loader';
  import 'vue3-skeleton-loader/dist/style.css';
</script>
<template>
  <div class="container">
    <div class="avatar-container">
      <VueSkeletonLoader type="avatar"/>
      <div>
        <VueSkeletonLoader type="text" width="100px" height="10px"/>
        <VueSkeletonLoader type="text" width="70px" height="6px"/>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
  .container {
    max-width: 400px;
    margin: 30px auto;
    padding: 12px;
    border: 2px solid #0000001E;
    border-radius: 0.25rem;

    .avatar-container {
      display: flex;
      gap: 12px;
      align-items: center;
    }
  }

</style>

License

MIT