@vuesimple/vs-loader

A simple vue loader. Perfect for all your loader scenarios.
3,581 33
vue vuejs popup web notification front-end loader vue-js vue-loader vue-js-loader vs-loader
Install
npm install @vuesimple/vs-loader
Latest Version:3.1.8
Vue:3
Older releases:2
License:MIT
Last Updated:Oct 14, 2026
Links: GitHub  ·  npm
Maintainer: ashwinkshenoy

Vue Simple Loader

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

A light weight vue plugin built groundup.

npm npm

forthebadge forthebadge forthebadge forthebadge forthebadge forthebadge


📺 Live Demo

Demo: Link


🛠 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://unpkg.com/@vuesimple/vs-loader/dist/vs-loader.min.js"></script>

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

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

⚙ Props

Common props
Name Type Default Description
variant String pulse Variants: pulse, dots, inline, skeleton.
color String - Loader color.
size Number|String - 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)" />

Related Packages

@vuesimple/vs-pagination

A simple vue pagination

10,154 33
front-end notification popup vue vue-js vuejs web pagination vs-pagination vue-js-pagination +1
@vuesimple/vs-alert

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

5,598 33
front-end notification popup vue vue-js vuejs web alert vs-alert vue-alert +1
@vuesimple/vs-accordion

A simple vue accordion.

4,960 33
front-end notification popup vue vue-js vuejs web accordion vs-accordion vue-accordion +1
@vuesimple/vs-select

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

4,630 33
front-end notification popup vue vue-js vuejs web select vs-select vue-js-select +1
@vuesimple/vs-datepicker

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

3,543 33
front-end notification popup vue vue-js vuejs web datepicker vs-datepicker vue-datepicker +1

Version History

Version Released Vue License
3.1.8 ^3.2.37 MIT
3.1.7 ^3.2.37 MIT
3.1.6 ^3.2.37 MIT
3.1.5 ^3.2.37 MIT
3.1.3 ^3.2.37 MIT