Welcome to my Vue.js app. I am looking to add separate spinners inside each component's body instead of loading for the entire app. If there are any other spinner plugins available, feel free to suggest them.
CDN links for Vue.js
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2056554560120e15">[email protected]</a>/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-loading-overlay@3"></script>
<link href="https://cdn.jsdelivr.net/npm/vue-loading-overlay@3/dist/vue-loading.css" rel="stylesheet">
HTML Code
<main id="app">
<div class="clearfix" style="width:200px;height: 200px; border:1px solid; border-color: #ff0000">
cgg <comp1-loading><loading :active.sync="visible" :can-cancel="true"></loading></comp1-loading>gg
</div>
<div class="clearfix" style="width:200px;height: 200px; border:1px solid; border-color: #ff0000">
cgg <comp1-loading><loading :active.sync="visible" :can-cancel="true"></loading></comp1-loading>gg
</div>
<h1>Vue Loading Overlay demo</h1>
<button @click.prevent="open()">Programmatic show</button>
<button @click.prevent="show()">Component show, cancellable</button>
<hr>
</main>
The following shows the Vue.js App Component. There are two components within the same app, and I want to load each one separately.
<script>
Vue.use(VueLoading);
Vue.component('comp1-loading', {
data: function () {
return {
loading: true,
dataList:[],
something: false,
message:"fgd"
}
},
mounted(){
this.fetchData();
let loader = this.$loading.show({
loader: 'dots'
});
setTimeout(() => loader.hide(), 3 * 1000)
},
methods:{
fetchData:function(){
var vm=this;
vm.message="Hai this is spinner div";
},
serverDateFormat: function(date) {
}
},
template: `<div >{{message}}</div>`
})
Vue.component('comp2-loading', {
data: function () {
return {
loading: true,
dataList:[],
something: false,
message:"fgd"
}
},
mounted(){
this.fetchData();
let loader = this.$loading.show({
loader: 'dots'
});
setTimeout(() => loader.hide(), 2 * 1000)
},
methods:{
fetchData:function(){
var vm=this;
vm.message="Hai cthis is spinner div";
},
serverDateFormat: function(date) {
}
},
template: `<div >{{message}}</div>`
})
Vue.use(VueLoading);
let app = new Vue({
el: '#app',
data() {
return {
visible: true
}
},
components: {
Loading: VueLoading
},
methods: {
open() {
console.log('open was clicked, will auto hide');
let loader = this.$loading.show({
loader: 'dots'
});
setTimeout(() => loader.hide(), 3 * 1000)
},
show() {
console.log('show was clicked, click to hide');
// do AJAX here
this.visible = true
}
}
});
</script>