💀 Vue3 Skeleton Loading (Vue 3+ Typescript + Vite)

Vue 3 adaptive skeleton loading component that will match your typography.

Installation

npm install vue3-loading-skeleton

Why adaptive Vue3 Skeleton Loading ?

Skeletons are used to mimic how the real content would look, so in order to create nice skeleton you would have to manually create squares, circles and position/size them to match your real component and keep it updated whenever you change it.

Aww sounds awful isn't it?

Wouldn't be nice if you had a component for skeleton that automatically adjusts to your existing components layout? I think it would =) so the Vue3 Skeleton Loading comes to rescue.

Instead of creating separate skeleton components you can inject skeletons directly into your existing components.

Example:

``html

`

And that's it, the text skeletons will automatically catch up with the styles you defined for the title and text elements.

Basic Usage

First import the SkeletonLoader styles

`js
import "vue3-loading-skeleton/dist/style.css";
`

Option 1 - Register Locally

`js
// SomeComponent.vue
import { SkeletonLoader } from "vue3-loading-skeleton";

export default {
components: { SkeletonLoader },
};
`

Option 2 - Register Globally

`js
// main.ts
import { SkeletonLoader } from "vue3-loading-skeleton";

createApp(App).component("SkeletonLoader", SkeletonLoader).mount("#app");
`

`html


`

$3

Width

width: number | string
default: 100%

`html






`

Width of your skeleton, can be a number or css string value.

Height

height: number | string
default: 32px

`html






`

Height of your skeleton, can be a number or css string value.

$3

When you set height, your skeleton automatically becomes a rect with display:
block meaning it will no longer adapt to your typography, which is useful for
creating non text block level skeletons like image placeholders, buttons, and e.t.c.

Size

size: number | string
⚠️ It works with circle property also

`html





`

Size sets both width & height to simplify creating square/circle shapes

Circle

circle: boolean (default: false)

`html


`

As the name suggest it just turns the element into a circle, use only when width & height or size is set.

Pill

pill: boolean
default: false

`html

`

Makes rectangular skeletons fully rounded, useful when creating rounded button or chip or card's footer or actions buttons
and e.t.c shapes.

Preview

preview: boolean
default: false

`html

`

Optionally you can turn off/on specific skeleton's preview animation, it is based, if you enable preview, then the component will have preview mode without animation.

Tag

tag: string
default: span

`html

`

By default skeletons are rendered as span tags, but you can change it
using this prop.

Customizing the style and animation with Props

SkeletonLoader supports additional props which is exposed to change the animation dynamically as per need and use cases.

Background color

backgroundColor: string
default: #dddbdd

`html

`

You can change the background color of your skeleton using this property.

Duration

duration: string
default: 1.5s ref

`html

`

By default skeletons are rendered with animation duration 1.5s you can customize with valid animation duration css value in seconds.

Gradient

gradient: string
default: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0))

`html

`

You can change the animation background gradient of your skeleton using this property with valid css animation gradient.Reference for Background gradient generator

Animation Timing Function

animationTimingFunction: string
default: ease-in-out ref

`html

``

You can change the animation Timing Function of your skeleton using this property with valid css animation timing function value