A loader component that can be designed with simple markup.

Overview

Deploy Npm Publish

DEMO

Installation

npm i v-skeleton-loader

Plugin

import VSkeletonLoader from 'v-skeleton-loader';

Vue.use(VSkeletonLoader);

Component

Content

You can implement multiple types of skeleton loaders simultaneously using content property.

<template>
  <v-skeleton-loader :content="thumbItem"></v-skeleton-loader>
</template>

<script>
import VSkeletonLoader from 'v-skeleton-loader';
export default {
  components: {
    VSkeletonLoader
  },
  data () {
    return {
      thumbItem: ['box', 'text']
    }
  }
}
</script>
<template>
  <v-skeleton-loader :content="cardItem"></v-skeleton-loader>
</template>

<script>
import VSkeletonLoader from 'v-skeleton-loader';
export default {
  components: {
    VSkeletonLoader
  },
  data () {
    return {
      cardItem: [
        ['blank', 'circle:100', 'blank'],
        ['title'],
        ['text:3']
      ]
    }
  }
}
</script>

Options

Options allow you to implement different styles of Skeleton Loaders.

<v-skeketon-loader
  :options="{
    radius: 3,
    primaryColor: '#94bcff',
    secondaryColor: '#c7dcff',
    animate: true,
    speed: '1.5s',
    defaultSizes: {
      box: 100,
      circle: 100,
      title: 25,
      text: 15,
    }
  }">
</v-skeketon-loader>

📝 License

Copyright © 2022. Built by INTEGRATION Corp.
This project is distributed under MIT license.

You might also like...
Vue component runtime generator for svg-sprite-loader.

svg-sprite-vue-generator Vue component runtime generator for svg-sprite-loader. Install npm install svg-sprite-vue-generator -D Usage Inline mode All

Vue Skeleton Loader - Show component's skeleton before it's loaded
Vue Skeleton Loader - Show component's skeleton before it's loaded

Vue Skeleton Loader Show component's skeleton before it's loaded Installation Via NPM import Vue from 'vue' import VueSkeletonLoader from 'vue-skeleto

Markdown to Vue component loader for Webpack.

markdown-to-vue-loader Markdown to Vue component loader for Webpack. The built-in markdown parser is markdown-it. Examples. Features Supports Vue 2 an

Webpack Loader for: FrontMatter (.md) - HTML + Attributes (+ Vue component)

frontmatter-markdown-loader Webpack Loader for: FrontMatter (.md) which returns Compiled HTML + Attributes (+ Compiled object as a Vue component) This

Complex Loader and Progress Management for Vue/Vuex and Nuxt Applications
Complex Loader and Progress Management for Vue/Vuex and Nuxt Applications

Multiple Process Loader Management for Vue and (optionally) Vuex. Read the Medium post "Managing Complex Waiting Experiences on Web UIs". Play with de

Pre Loader components for vue.js
Pre Loader components for vue.js

Demo and playground Live demo - https://vue-preloader.netlify.app/ Playground Website. Adjust the settings using the playground options. On the bottom

A loader manager for vue3 with reactive method

A loader manager for vuejs 3 with reactive method

Webpack loader used for inline replacement of SVG images with actual content of SVG files in Vue projects.

Webpack loader used for inline replacement of SVG images with actual content of SVG files in Vue projects.

Webpack loader for Vue multifile components.

Webpack loader for Vue multifile components.

Vue-ac-loader is a plugin for show a full screen loader on requests.

AC Loader (vue-ac-loader) vue-ac-loader is a plugin for show a full screen loader on requests.

miSkoMV 0 Jan 21, 2020
Webpack loader to be used along with vue-loader for Single File Components that provides template extension

vue-inheritance-loader Webpack loader to be used along with vue-loader for Single File Components that provides template extension. In Vue its possibl

Matias Rodal 39 May 24, 2021
Vue-loader-page: Full Page Loader

Vue-loader-page: Full Page Loader

Gurinder Chauhan 0 Jul 21, 2018
md-vue-loader is a Webpack loader to import Markdown files as Vue components

md-vue-loader md-vue-loader is a Webpack loader to import Markdown files as Vue components. ?? Why? ?? Decoupled from Vue Compatible with any version

hiroki osame 4 Jan 11, 2022
webpack loader, loads the .md file and returns the webpack loader that contains the content string in the file to achieve the function of making webpack load the .md file

webpack loader, loads the .md file and returns the webpack loader that contains the content string in the file to achieve the function of making webpack load the .md file

socialuni 0 Dec 28, 2020
Viai18n-loader - another webpack loader i18n solution for Vue (Nuxt) with auto generated keys.

Viai18n-loader - another webpack loader i18n solution for Vue (Nuxt) with auto generated keys. Currently under development, pull requests and suggesti

邓燊(Shen DENG) 3 Sep 3, 2021
Simple customizeable page loader component with self state manager module for Vue.js

⌛️ Sadrix Vue Page Loader ⏳ Simple customizeable page loader component with self state manager module for Vue.js. github repository Please let me know

Sadra Hoseini 6 Aug 27, 2022
A simple and easily customizable skeleton loader plugin for you Vue application.

skeleton-loader-vue Loader showing skeleton view while data is being loaded to improve UX. ?? Installation npm: npm install skeleton-loader-vue --save

Abdulqudus Abubakre 74 Nov 15, 2022
Simple loader for using Louk with webpack

Louk Loader Simple loader for using Louk with webpack. Installation Install louk-loader via npm.

Louk 0 Jul 3, 2020
Vue3/Vue2 Single File Component loader

Single File Component loader for Vue2 and Vue3. Load .vue files directly from your HTML. No node.js environment, no build step.

Franck Freiburger 568 Nov 22, 2022