easy-skeleton-loader-vue

Skeleton loader components for Vue 3 + TypeScript

Show placeholder UI while data loads — improves perceived performance and prevents layout shifts.

Features

• 4 built-in shape types — text, button, avatar, input
• 2 animations — fade-in (pulse) and wave (shimmer)
• Pre-built composites — SkeletonCard and SkeletonUser for common layouts
• Fully customizable — control width, height, radius, count, and delay
• Dark mode support via CSS variables
• Lightweight — zero dependencies beyond Vue 3
• TypeScript — full type definitions included

Installation

# npm
npm install easy-skeleton-loader-vue

# yarn
yarn add easy-skeleton-loader-vue

# pnpm
pnpm add easy-skeleton-loader-vue

Quick Start

Import the styles once in your app entry (e.g. App.vue or main.ts):

import 'easy-skeleton-loader-vue/styles.css'

Then use any component:

<script setup lang="ts">
import { SkeletonShape } from 'easy-skeleton-loader-vue'
</script>

<template>
  <SkeletonShape type="avatar" animation="wave" />
</template>

Components

SkeletonShape

Pre-configured shapes with sensible defaults. This is the easiest way to get started.

<script setup lang="ts">
import { SkeletonShape } from 'easy-skeleton-loader-vue'
</script>

<template>
  <SkeletonShape type="avatar" animation="wave" />
  <SkeletonShape type="button" animation="fade-in" />
  <SkeletonShape type="text" animation="fade-in" />
  <SkeletonShape type="input" animation="fade-in" />
</template>

Each type maps to specific dimensions:

Type	Width	Height	Radius
avatar	100px	100px	50 (circle)
button	80px	40px	6
text	100%	10px	6
input	100%	40px	6

SkeletonItem

The low-level building block. Use this to build fully custom skeletons with precise control over dimensions.

<script setup lang="ts">
import { SkeletonItem } from 'easy-skeleton-loader-vue'
</script>

<template>
  <!-- Single element -->
  <SkeletonItem width="200" height="20" radius="8" animation="wave" />

  <!-- Multiple repeated elements -->
  <SkeletonItem width="100%" height="16" count="3" animation="fade-in" delay="0.2" />
</template>

SkeletonCard

A pre-built card layout with avatar, title, description, and action buttons.

<script setup lang="ts">
import { SkeletonCard } from 'easy-skeleton-loader-vue'
</script>

<template>
  <SkeletonCard animation="wave" />
  <SkeletonCard animation="fade-in" :dark="true" />
</template>

SkeletonUser

A pre-built user profile layout with avatar and text lines.

<script setup lang="ts">
import { SkeletonUser } from 'easy-skeleton-loader-vue'
</script>

<template>
  <SkeletonUser animation="wave" />
  <SkeletonUser animation="fade-in" :dark="true" />
</template>

API

SkeletonItem / SkeletonShape Props

Prop	Type	Default	Options	Description
type	string	'text'	text, button, avatar, input	Shape type (SkeletonShape only)
width	number | string	'100%'	—	Width of the skeleton element. Numbers are treated as px.
height	number | string	'16px'	—	Height of the skeleton element. Numbers are treated as px.
radius	number	12	—	Border radius in px
count	number	1	—	Number of skeleton elements to render
animation	string	'fade-in'	fade-in, wave	Animation style
delay	number	—	—	Animation delay in seconds

SkeletonCard / SkeletonUser Props

Prop	Type	Default	Description
animation	string	'fade-in'	Animation style (fade-in or wave)
dark	boolean	false	Enable dark mode

Dark Mode

The pre-built components (SkeletonCard, SkeletonUser) accept a dark prop:

<SkeletonCard animation="wave" :dark="true" />

For custom skeletons, add the sk-loader--dark CSS class to a parent element, or override the CSS variables:

:root {
  --sk-primary-color: #ced4da;
  --sk-secondary-color: #ffffffa9;
  --sk-bk-color: #fff;
}

/* Dark theme overrides */
.dark-theme {
  --sk-primary-color: #555;
  --sk-secondary-color: #ffffff1a;
  --sk-bk-color: #3f3f3f;
}

TypeScript

Type definitions are included. You can import types directly:

import type { SkeletonProps, SkeletonTypes, SkeletonAnimation } from 'easy-skeleton-loader-vue'

Contributing

Contributions are welcome — whether it's a new pre-built shape, a bug fix, or a documentation improvement.

1. Fork the project
2. Create your feature branch (git checkout -b feature/my-feature)
3. Run the dev server (npm run dev)
4. Commit your changes (git commit -m 'Add my feature')
5. Push to the branch (git push origin feature/my-feature)
6. Open a Pull Request

License

Apache-2.0

Author

Ali Hassan — Software Developer

---

If you find this useful, consider giving it a star on GitHub.