To add a loading within a container, call the $vs.loading()
global function passing the container
and the scale
parameters. When you want to remove it we have $vs.loading.close()
, passing the same container
parameter
For the examples, the request or the delay is simulated with setTimeout
Button with Loading
Div with Loading
<template>
<vs-button ref="loadableButton" id="button-with-loading" class="vs-con-loading__container" @click="openLoadingContained" type="relief">
Button with Loading
</vs-button>
<vs-button @click="openLoadingInDiv" type="relief">Div with Loading</vs-button>
<div class="contained-example-container">
<div id="div-with-loading" class="vs-con-loading__container">Load Me!</div>
</div>
</template>
<script>
export default {
data(){
return {
backgroundLoading:'primary',
colorLoading:'#fff',
}
},
methods:{
openLoadingContained(){
this.$vs.loading({
background: this.backgroundLoading,
color: this.colorLoading,
container: "#button-with-loading",
scale: 0.45
})
setTimeout( ()=> {
this.$vs.loading.close("#button-with-loading > .con-vs-loading")
}, 3000);
},
openLoadingInDiv(){
this.$vs.loading({
container: '#div-with-loading',
scale: 0.6
})
setTimeout( ()=> {
this.$vs.loading.close('#div-with-loading > .con-vs-loading')
}, 3000);
},
}
}
</script>