easy-skeleton-loader-vue

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

- easy to used

``ts

`

- build your own skeleton

`ts


`

!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

`ts
import 'easy-skeleton-loader-vue/styles.css';
`

#### now you can use the skeleton

- Using 'easy-skeleton-loader-vue' in your .vue file

`ts



`

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

$3

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

|Prop|Type|Default|Options|Description|
|---|---|---|---|---|
|width|number, 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|
|height|number, string|16px||The 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|
|type|string|'text'|text, button, avatar, input|This is the type of the loader. It could be circle or rectangle shaped|
|animation|string|'fade-in'|fade-in, wave|The animation to be applied to the loader|
|radius|number|12||This is used to determine the border radius of the loader|
|count|number|1||This is used to determine the number of the loader|

Give a Star

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

Authors

- Ali Hassan - Software developer