Skeleton loaders (Shimmer loaders)
Skeleton Loader components can be used as a loading animations or space-fillers while waiting for the actual content to load.
#Basic Usage
You can use the shimmers Loader for various purpose like loading animations or space-filler etc. LightVue comes with some stunning designs for shimmers loaders.There are different types of shimmers are present in lightVue you can go through this page for more info.You can customize the LightVue Shimmer in various ways. LightVue Shimmer Loaders is Both compatible with Vue 2.x and Vue 3.x
#Adjusting height & width
You can change the height and width of shimmer by passing value in height and width props respectively.
#Colors
You can change the primaryColor and secondaryColor of shimmer by passing value in primaryColor and secondaryColor props respectively.
#Opacity
You can change the primaryOpacity and secondaryOpacity of shimmer by passing value in primaryOpacity and secondaryOpacity props respectively
#Speed
You can change the speed of animation by passing value in speed prop.
#Disable Animation
You can change the disable the animation by setting animate prop false.
#Code Loader
LightVue comes with some preset for shimmer loaders.lv-code-loader is one of them you can custmize it in the same way as shimmers
#List Loader
LightVue comes with some preset for shimmer loaders.lv-list-loader is one of them you can custmize it in the same way as shimmers
#Card List
LightVue comes with some preset for shimmer loaders.lv-card-list is one of them you can custmize it in the same way as shimmers
#Custom Loaders
LightVue comes with some preset for shimmer loaders.lv-skeleton is one of them you can custmize it in the same way as shimmers
#Setup
You can import a component and register it as a local and global vue component as follows:
// import the component
import LvSkeleton from 'lightvue/LvSkeleton';
// Register the component locally
export default {
components: {
LvSkeleton
}
}// Register the component globally (Vue 2.x)
Vue.component('LvSkeleton', LvSkeleton);
// Register the component globally (Vue 3.x)
const app = Vue.createApp({
// ...
});
app.component('LvSkeleton', LvSkeleton);
app.mount('#app')
#APIs
All of the props, events and slots of the component are mentioned below: