Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

skeleton-loader-vue

Package Overview
Dependencies
Maintainers
1
Versions
11
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

skeleton-loader-vue

A simple, customizable skeleton loader for your vue app

  • 1.0.10
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
2.8K
decreased by-17.17%
Maintainers
1
Weekly downloads
 
Created
Source

skeleton-loader-vue

Loader showing skeleton view while data is being loaded to improve UX.

Sample loader


:cd: Installation

  • npm: npm install skeleton-loader-vue --save
  • yarn: yarn add skeleton-loader-vue

:rocket: Usage

You can import and register the component globally in your main.js, or import and use it in a particular component.

To register in your main.js

import Vue from 'vue';
// Import the component
import VueSkeletonLoader from 'skeleton-loader-vue';

// Register the component globally
Vue.component('vue-skeleton-loader', VueSkeletonLoader);

To register in your component

<script>
import VueSkeletonLoader from 'skeleton-loader-vue';
export default {
  components: { VueSkeletonLoader },
};
</script>

Using loader in your .vue file

<template>
  <div class="facebook-card">
    <skeleton-loader-vue
      type="circle"
      :width="200"
      :height="200"
      animation="fade"
    />
  </div>
</template>

This would give create a circle having a width and heigth of 200px and an animation of fade.

API

Props

PropTypeDefaultOptionsDescription
widthnumber, string200The is the width of the loader, and can be either a number or string. This property would be overridden if the size props is set
heightnumber, string100The is the height of the loader, and can be either a number or string. This property would be overridden if the size props is set
sizenumber,stringThis is used to give the loader the same width and height. The property would override the width and height previously set
typestring'rect'rect, circleThis is the type of the loader. It could be circle or rectangle shaped
animationstring'wave'fade, wave, pulse, pulse-x, pulse-yThe animation to be applied to the loader
colorstringrgba(0,0,0,0.12)The sets the color of the loader. It accepts all valid CSS colors (rgb, hsl, hex included)
wave-colorstringrgba(255, 255, 255, 0.5)The sets the color of the wave. It accepts all valid CSS colors (rgb, hsl, hex included)
roundedbooleanfalseAdd this prop to give a non-circle loader a border-radius 0f 8px
radiusnumber,string8This is used to determine the border radius of the loader

Project setup

Install dependencies

  • npm: npm install
  • yarn: yarn

Start Dev Server

  • npm: npm run serve
  • yarn: yarn serve

Compiles and minifies for production

  • npm: npm run build
  • yarn: yarn build

Customize configuration

See Configuration Reference.

Keywords

FAQs

Package last updated on 31 Mar 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc