npm i v-skeleton-loader
import VSkeletonLoader from 'v-skeleton-loader';
Vue.use(VSkeletonLoader);
You can implement multiple types of skeleton loaders simultaneously using content property.
<template>
<v-skeleton-loader :content="thumbItem"></v-skeleton-loader>
</template>
<script>
import VSkeletonLoader from 'v-skeleton-loader';
export default {
components: {
VSkeletonLoader
},
data () {
return {
thumbItem: ['box', 'text']
}
}
}
</script><template>
<v-skeleton-loader :content="cardItem"></v-skeleton-loader>
</template>
<script>
import VSkeletonLoader from 'v-skeleton-loader';
export default {
components: {
VSkeletonLoader
},
data () {
return {
cardItem: [
['blank', 'circle:100', 'blank'],
['title'],
['text:3']
]
}
}
}
</script>Options allow you to implement different styles of Skeleton Loaders.
<v-skeketon-loader
:options="{
radius: 3,
primaryColor: '#94bcff',
secondaryColor: '#c7dcff',
animate: true,
speed: '1.5s',
defaultSizes: {
box: 100,
circle: 100,
title: 25,
text: 15,
}
}">
</v-skeketon-loader>Copyright © 2022. Built by INTEGRATION Corp.
This project is distributed under MIT license.