super simple skeleton component for Vue3, this component gives you just one div that has pre-defined styles (customizable with props)
width: {
type: String,
default: "100%",
},
height: {
type: [String, Number],
default: "100%",
},
bgColor: {
type: String,
default: "rgba(0, 0, 0, 0.12)",
},
borderRadius: {
type: String,
default: "5px",
},
circle: {
type: Boolean,
default: false,
},
title: {
type: String,
default: "",
},
placeText: {
type: String,
default: "center",
},
placeItems: {
type: String,
default: "center",
},
textRotation: {
type: String,
default: "0deg",
},
textColor: {
type: String,
default: "rgba(0, 0, 0, 0.2)",
},
textFont: {
type: String,
default: "inherit",
},
textFontSize: {
type: String,
default: "1.5em",
},import component from node modules
<script setup>import vSkeleton from '@bch_/v-skeleton'</script>then
<template>
<v-skeleton class="min-h-[500px] min-w-sm" />
<v-skeleton width="300px" height="400px" />
<v-skeleton
width="300px"
height="300px"
title="MY-SITE.COM"
placeItems="center"
textRotation="45deg"
/>
</template>if you have errors with your code editor/IDE when using typescript, consider adding the following to .d.ts file
declare module "@bch_/v-skeleton";
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent