Loader

A simple vue loader. Perfect for all your loader scenarios.

GitHub

Demo

Pulse

Dots

Inline

Skeleton - Line

Skeleton - Line (custom width + color)

Skeleton - Circle

Skeleton - Square

Skeleton - Card preview

Install

npm i @vuesimple/vs-loader

Usage

<template>
  <vs-loader variant="pulse"></vs-loader>
</template>

<script>
  import VsLoader from '@vuesimple/vs-loader';

  export default {
    components: {
      VsLoader,
    },
  };
</script>

CDN

<script src="https://cdn.jsdelivr.net/npm/@vuesimple/vs-loader@3.1.8/dist/index.min.js"></script>

// Main/Entry file
app.use(VsLoader.plugin);

<template>
  <vs-loader variant="pulse"></vs-loader>
</template>

Props

Name	Type	Default	Description
variant	String	pulse	Variants: pulse, dots, inline, skeleton.
color	String	#1f73b7	Loader color.
size	Number	10	Loader size.
center	Boolean	-	Center aligns the loader wrt the parent div.

Skeleton props (variant="skeleton")

Name	Type	Default	Description
type	String	line	Shape of the skeleton item. Options: line, square, circle.
count	Number|String	1	Number of skeleton items to render.
size	Number|String	-	Override size in px or any CSS value. Sets height for line, width+height for square/circle.
width	String	-	Override width for line type (e.g. 60%, 200px).
color	String	-	Base skeleton color. Defaults to #e9e9e9. Also accepts CSS variable.
center	Boolean	-	Center aligns the skeleton items.

Skeleton CSS variables

Variable	Default	Description
--vs-skeleton-color	#e9e9e9	Base background color.
--vs-skeleton-shimmer	rgba(255, 255, 255, 0.6)	Shimmer highlight color.

🦴 Skeleton Examples

Line (default)

<vs-loader variant="skeleton" type="line" :count="3" />

Circle

<vs-loader variant="skeleton" type="circle" :count="3" size="48" />

Square

<vs-loader variant="skeleton" type="square" size="100" />

Card preview layout

<div style="display: flex; gap: 16px; align-items: flex-start">
  <vs-loader variant="skeleton" type="circle" size="48" />
  <div style="flex: 1; display: flex; flex-direction: column; gap: 8px">
    <vs-loader variant="skeleton" type="line" width="50%" size="14" />
    <vs-loader variant="skeleton" type="line" width="80%" size="14" />
    <vs-loader variant="skeleton" type="line" width="65%" size="14" />
  </div>
</div>

Custom color via CSS variable

<vs-loader variant="skeleton" type="line" :count="3" style="--vs-skeleton-shimmer: rgba(255,255,255,0.9)" />