Vue3-Skeleton

This is a package based on the source code of Abdulqudus001. See original code at Here

:grey_question: What's new?

• TypeScript + Vue3 Supported

:cd: Installation

• npm: npm i @ndtpro/vue3-skeleton
• yarn: yarn add @ndtpro/vue3-skeleton

Usage

You can import and register the component globally in your main.js, or import and use it in a particular component.

Vue2: To register in your main.js

import Vue from 'vue';
// Import the component
import { Vue3Skeleton } from '@ndtpro/vue3-skeleton';

// Register the component globally
Vue.component('Vue3Skeleton', Vue3Skeleton);

Vue3: To register in your main.js

import { createApp } from 'vue';

// Import the component
import { Vue3Skeleton } from '@ndtpro/vue3-skeleton';

const app = createApp({});

// Register the component globally
app.component('Vue3Skeleton', Vue3Skeleton);

To register in your component

<script>
	import Vue3Skeleton from '@ndtpro/vue3-skeleton';
	export default {
		components: { Vue3Skeleton },
	};
</script>

Using loader in your .vue file

<template>
	<Vue3Skeleton type="circle" :size="100" animation="fade" />
	<Vue3Skeleton type="rect" :width="300" :height="100" />
</template>

API

Props

| 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.08) | | 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 |

Project setup

Install dependencies

• npm: npm install
• yarn: yarn

Start Dev Server

• npm: npm run serve
• yarn: yarn serve

Compiles and minifies for production

• npm: npm run build
• yarn: yarn build