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" />

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 { 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 :

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

Give a Star

• Go to the repo easy-skeleton-loader-vue.
• Click on the ⭐ button in the top-right corner of the page.

Authors

• Ali Hassan - Software developer