Vue3 Skeleton Loader

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

Animated GIF
## Basic Usage Using [npm](https://npmjs.com/) ```bash npm install vue3-skeleton-loader ``` Using [yarn](https://yarnpkg.com/) ```bash yarn add vue3-skeleton-loader ``` Using loader in your .vue file ```tsx import VueSkeletonLoader from 'vue3-skeleton-loader'; import 'vue3-skeleton-loader/dist/style.css'; ``` ## 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: ```vue ``` ## License [MIT](https://opensource.org/license/mit/)