Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
skeleton-loader-vue
Advanced tools
Loader showing skeleton view while data is being loaded to improve UX.
npm install skeleton-loader-vue --save
yarn add skeleton-loader-vue
You can import and register the component globally in your main.js, or import and use it in a particular component.
To register in your main.js
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
<script>
import VueSkeletonLoader from 'skeleton-loader-vue';
export default {
components: { VueSkeletonLoader },
};
</script>
Using loader in your .vue
file
<template>
<div class="facebook-card">
<skeleton-loader-vue
type="circle"
:width="200"
:height="200"
animation="fade"
/>
</div>
</template>
This would give create a circle having a width and heigth of 200px and an animation of fade.
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) | |
wave-color | string | rgba(255, 255, 255, 0.5) | The sets the color of the wave. 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 |
npm install
yarn
npm run serve
yarn serve
npm run build
yarn build
FAQs
A simple, customizable skeleton loader for your vue app
The npm package skeleton-loader-vue receives a total of 2,160 weekly downloads. As such, skeleton-loader-vue popularity was classified as popular.
We found that skeleton-loader-vue demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.