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 - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

src/components/Circle.vue

2

package.json
{
"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/).
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