vue4-skeleton-loader

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 true, the skeleton loader will be displayed.
type	text, avatar, image, button, chip, divider	text	String
Specifies the type and number of your skeleton, e.g., text@4. If only the type is written, it defaults to one.
animation	wave	wave	String
If left empty, no animation will be displayed. To showcase a specific animation, provide its name and define the corresponding keyframes globally.
duration	-	1.5s	String
The duration of the animation.
timingFunction	Common values include: ease, linear, ease-in, ease-out, ease-in-out, ...	linear	String
Specifies the speed curve of the animation.
base-color	-	#0000001E	String
Background color of the skeleton.
highlight-color	-	#FFFFFF66	String
Highlight color in the skeleton animation.
border-radius	-	varies	String, Number
Border radius of the skeleton, varies by type.
height	-	varies	String, Number
Height of the skeleton, varies by type.
width	-	varies	String, Number
Width of the skeleton, varies by type.
direction	ltr	ltr, rtl	String
Direction of the animation.
skeleton-style	-	{}	Object
Custom style for individual skeleton elements.
skeleton-class-name	-	""	String
Custom class name for individual skeleton elements, used alongside default class names.

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