skeleton-loader-vue
Advanced tools
Comparing version 1.0.2 to 1.0.3
{ | ||
"name": "skeleton-loader-vue", | ||
"version": "1.0.2", | ||
"version": "1.0.3", | ||
"description": "A Basic skeleton loadeer for your vue app", | ||
@@ -5,0 +5,0 @@ "repository": { |
# skeleton-loader-vue | ||
## Install | ||
> Loader showing skeleton view while data is being loaded to improve UX. | ||
npm | ||
![Sample loader](https://res.cloudinary.com/ibnabubakre/image/upload/v1594505356/loader.gif) | ||
```shell | ||
npm install skeleton-loader-vue --save | ||
``` | ||
--- | ||
yarn | ||
## :cd: Installation | ||
```shell | ||
yarn add skeleton-loader-vue | ||
``` | ||
* npm: `npm install skeleton-loader-vue --save` | ||
* yarn: `yarn add skeleton-loader-vue` | ||
## Usage | ||
## :rocket: Usage | ||
You can import and register the component globally in your main.js, or import and use it in a particular component. | ||
In your vue component, import the vue skeleton loader | ||
**To register in your `main.js`** | ||
```javascript | ||
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** | ||
```vue | ||
<script> | ||
import SkeletonLoaderVue from 'skeleton-loader-vue' | ||
import VueSkeletonLoader from 'skeleton-loader-vue'; | ||
export default { | ||
components: { SkeletonLoaderVue }, | ||
components: { VueSkeletonLoader }, | ||
}; | ||
@@ -30,7 +37,7 @@ </script> | ||
Then you can use the component in your template | ||
**Using loader in your `.vue` file** | ||
```vue | ||
<template> | ||
<div> | ||
<div class="facebook-card"> | ||
<skeleton-loader-vue | ||
@@ -46,40 +53,39 @@ type="circle" | ||
## References | ||
This would give create a circle having a width and heigth of 200px and an animation of fade. | ||
Types: circle, text, rect | ||
## API | ||
Animations: fade, wave, pulse, pulse-x, pulse-y | ||
### Props | ||
Size: Overwrites the width and height with the provided value | ||
|Prop|Type|Default|Options|Description| | ||
|---|---|---|---|---| | ||
|width|number, string|200||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|100||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| | ||
|size|number,string|||This is used to give the loader the same width and height. The property would override the width and height previously set| | ||
|type|string|'rect'|rect, circle|This is the type of the loader. It could be circle or rectangle shaped| | ||
|animation|string|'wave'|fade, wave, pulse, pulse-x, pulse-y|The animation to be applied to the loader| | ||
|color|string|rgba(0,0,0,0.12)||The sets the color of the loader. It accepts all valid CSS colors (rgb, hsl, hex included)| | ||
|rounded|boolean|false||Add this prop to give a non-circle loader a border-radius 0f 8px| | ||
|radius|number,string|8||This is used to determine the border radius of the loader| | ||
Width: Sets width of loader | ||
Height: Sets height of the loader | ||
## Project setup | ||
```shell | ||
yarn install | ||
``` | ||
### Install dependencies | ||
### Compiles and hot-reloads for development | ||
* npm: `npm install` | ||
* yarn: `yarn` | ||
```shell | ||
yarn serve | ||
``` | ||
### Start Dev Server | ||
* npm: `npm run serve` | ||
* yarn: `yarn serve` | ||
### Compiles and minifies for production | ||
```shell | ||
yarn build | ||
``` | ||
* npm: `npm run build` | ||
* yarn: `yarn build` | ||
### Lints and fixes files | ||
```shell | ||
yarn lint | ||
``` | ||
### Customize configuration | ||
See [Configuration Reference](https://cli.vuejs.org/config/). |
41016
90