Progress Loaders
Progress Loader components can be used as a loading animations or space-fillers while waiting for the actual content to load.
#Ball Scale
You can use the progress Loader for various purpose like loading animations or space-filler etc. LightVue comes with some stunning designs for progress loaders.There are different types of loaders are present in lightVue you can go through this page for more info.You can change the type of loaders by passing value in type prop. LightVue Progress Loaders is Both compatible with Vue 3.x and Vue 2.x
#Ball Scale Multiple
Use the below type of loaders by passing in ball-scale-multiple within the type prop. You can change the size of your loader by passing in a value in the scale prop. You can also change the color of your loader by passing a color string in your color prop.
#Ball Scale Random
Use the below type of loaders by passing in ball-scale-random within the type prop. You can change the size of your loader by passing in a value in the scale prop. You can also change the color of your loader by passing a color string in your color prop.
#Ball Scale Ripple
Use the below type of loaders by passing in ball-scale-ripple within the type prop. You can change the size of your loader by passing in a value in the scale prop. You can also change the color of your loader by passing a color string in your color prop.
#Ball Scale Ripple Multiple
Use the below type of loaders by passing in ball-scale-ripple-multiple within the type prop. You can change the size of your loader by passing in a value in the scale prop. You can also change the color of your loader by passing a color string in your color prop.
#Ball Beat
Use the below type of loaders by passing in ball-beat within the type prop. You can change the size of your loader by passing in a value in the scale prop. You can also change the color of your loader by passing a color string in your color prop.
#Ball Pulse
Use the below type of loaders by passing in ball-pulse within the type prop. You can change the size of your loader by passing in a value in the scale prop. You can also change the color of your loader by passing a color string in your color prop.
#Ball Pulse Sync
Use the below type of loaders by passing in ball-pulse-sync within the type prop. You can change the size of your loader by passing in a value in the scale prop. You can also change the color of your loader by passing a color string in your color prop.
#Ball Pulse Rise
Use the below type of loaders by passing in ball-pulse-rise within the type prop. You can change the size of your loader by passing in a value in the scale prop. You can also change the color of your loader by passing a color string in your color prop.
#Ball Rotate
Use the below type of loaders by passing in ball-rotate within the type prop. You can change the size of your loader by passing in a value in the scale prop. You can also change the color of your loader by passing a color string in your color prop.
#Ball Grid Beat
Use the below type of loaders by passing in ball-grid-beat within the type prop. You can change the size of your loader by passing in a value in the scale prop. You can also change the color of your loader by passing a color string in your color prop.
#Ball Grid Pulse
Use the below type of loaders by passing in ball-grid-pulse within the type prop. You can change the size of your loader by passing in a value in the scale prop. You can also change the color of your loader by passing a color string in your color prop.
#Ball Spin Fade Loader
Use the below type of loaders by passing in ball-spin-fade-loader within the type prop. You can change the size of your loader by passing in a value in the scale prop. You can also change the color of your loader by passing a color string in your color prop.
#Ball Zig Zag
Use the below type of loaders by passing in ball-zig-zag within the type prop. You can change the size of your loader by passing in a value in the scale prop. You can also change the color of your loader by passing a color string in your color prop.
#Ball Zig Zag Deflect
Use the below type of loaders by passing in ball-zig-zag-deflect within the type prop. You can change the size of your loader by passing in a value in the scale prop. You can also change the color of your loader by passing a color string in your color prop.
#Ball Triangle Path
Use the below type of loaders by passing in ball-triangle-path within the type prop. You can change the size of your loader by passing in a value in the scale prop. You can also change the color of your loader by passing a color string in your color prop.
#Ball Clip Rotate
Use the below type of loaders by passing in ball-clip-rotate within the type prop. You can change the size of your loader by passing in a value in the scale prop. You can also change the color of your loader by passing a color string in your color prop.
#Ball Clip Rotate Multiple
Use the below type of loaders by passing in ball-clip-rotate-multiple within the type prop. You can change the size of your loader by passing in a value in the scale prop. You can also change the color of your loader by passing a color string in your color prop.
#Line Scale
Use the below type of loaders by passing in line-scale within the type prop. You can change the size of your loader by passing in a value in the scale prop. You can also change the color of your loader by passing a color string in your color prop.
#Line Scale Party
Use the below type of loaders by passing in line-scale-party within the type prop. You can change the size of your loader by passing in a value in the scale prop. You can also change the color of your loader by passing a color string in your color prop.
#Line Scale Pulse Out
Use the below type of loaders by passing in line-scale-pulse-out within the type prop. You can change the size of your loader by passing in a value in the scale prop. You can also change the color of your loader by passing a color string in your color prop.
#Line Scale Pusle Out Rapid
Use the below type of loaders by passing in line-scale-pulse-out-rapid within the type prop. You can change the size of your loader by passing in a value in the scale prop. You can also change the color of your loader by passing a color string in your color prop.
#Line Spin Fade Loader
Use the below type of loaders by passing in line-spin-fade-loader within the type prop. You can change the size of your loader by passing in a value in the scale prop. You can also change the color of your loader by passing a color string in your color prop.
#Square Spin
Use the below type of loaders by passing in squar-spin within the type prop. You can change the size of your loader by passing in a value in the scale prop. You can also change the color of your loader by passing a color string in your color prop.
#Cube Transition
Use the below type of loaders by passing in cube-transition within the type prop. You can change the size of your loader by passing in a value in the scale prop. You can also change the color of your loader by passing a color string in your color prop.
#Semi Circle Spin
Use the below type of loaders by passing in semi-circle-spin within the type prop. You can change the size of your loader by passing in a value in the scale prop. You can also change the color of your loader by passing a color string in your color prop.
#Triangle Skew Spin
Use the below type of loaders by passing in triangle-skew-spin within the type prop. You can change the size of your loader by passing in a value in the scale prop. You can also change the color of your loader by passing a color string in your color prop.
#Pacman
Use the below type of loaders by passing in pacman within the type prop. You can change the size of your loader by passing in a value in the scale prop. You can also change the color of your loader by passing a color string in your color prop.
#Setup
You can import a component and register it as a local and global vue component as follows:
// import the component
import LvLoader from 'lightvue/progressloader';
// Register the component locally
export default {
components: {
LvLoader
}
}// Register the component globally (Vue 2.x)
Vue.component('LvLoader', LvLoader);
// Register the component globally (Vue 3.x)
const app = Vue.createApp({
// ...
});
app.component('LvLoader', LvLoader);
app.mount('#app')
#APIs
All of the props, events and slots of the component are mentioned below: