You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

easy-skeleton-loader-vue-test

Package Overview
Dependencies
1
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

easy-skeleton-loader-vue-test

A simple, customizable skeleton loader for your vue app


Version published
Maintainers
1
Created

Readme

Source

easy-skeleton-loader-vue

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

  • easy to used
  <SkeletonShape type="text" animation="fade-in" />
  • build your own skeleton
  <SkeletonCard animation="wave" />
  <SkeletonUser animation="fade-in" />

Alt text

Installation

Install easy-skeleton-loader-vue with :

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

Usage/Examples

  • import styles.css in your App.vue
import 'easy-skeleton-loader-vue/styles.css';
now you can use the skeleton
  • Using 'easy-skeleton-loader-vue' in your .vue file
<script setup lang="ts">
import 'easy-skeleton-loader-vue/styles.css'
import { SkeletonShape } from 'easy-skeleton-loader-vue'
</script>

<template>
  <h3>Avatar</h3>
  <SkeletonShape type="avatar" animation="wave" />
  <h3>Button</h3>
  <SkeletonShape type="button" animation="fade-in" />
  <h3>Text</h3>
  <SkeletonShape type="text" animation="fade-in" />
  <h3>Input</h3>
  <SkeletonShape type="input" animation="fade-in" />
</template>

This would give u a diff. shapes :

Alt text

Contributing

Contributions are always welcome!

you can share your custom shape, you can refactor code, you can fix bugs by

Creating A Pull Request

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/FeatureName)
  3. Commit your Changes (git commit -m 'Add some feature description')
  4. Push to the Branch (git push origin feature/FeatureName)
  5. Open a Pull Request

API

PropTypeDefaultOptionsDescription
widthnumber, string'100%'The 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, string16pxThe 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
typestring'text'text, button, avatar, inputThis is the type of the loader. It could be circle or rectangle shaped
animationstring'fade-in'fade-in, waveThe animation to be applied to the loader
radiusnumber12This is used to determine the border radius of the loader
countnumber1This is used to determine the number of the loader

Authors

  • Ali Hassan - Software developer

Keywords

FAQs

Package last updated on 19 May 2023

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

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc