I've set up a basic Vue project on codesandbox.io that includes vue-router and a custom spinner for loading.
Spinner.vue:
<template>
<div class="spinner" v-show="loading">
<span class="sync" v-bind:style="[spinnerStyle, spinnerDelay1]"></span>
<span class="sync" v-bind:style="[spinnerStyle, spinnerDelay2]"></span>
<span class="sync" v-bind:style="[spinnerStyle, spinnerDelay3]"></span>
</div>
</template>
<script>
export default {
name: "Spinner",
props: {
loading: {
type: Boolean,
default: true
},
color: {
type: String,
default: "#5dc596"
},
size: {
type: String,
default: "15px"
},
margin: {
type: String,
default: "2px"
},
radius: {
type: String,
default: "100%"
}
},
data() {
return {
spinnerStyle: {
backgroundColor: this.color,
height: this.size,
width: this.size,
borderRadius: this.radius,
margin: this.margin,
display: 'inline-block',
animationName: 'spinerAnimation',
animationDuration: '1.25s',
animationIterationCount: 'infinite',
animationTimingFunction: 'ease-in-out',
animationFillMode: 'both'
},
spinnerDelay1: {
animationDelay: '0.07s'
},
spinnerDelay2: {
animationDelay: '0.14s'
},
spinnerDelay3: {
animationDelay: '0.21s'
}
};
},
methods: {
start() {
this.loading = true;
},
end() {
this.loading = false;
}
}
};
</script>
The main page is called Home.vue and it contains links to other components:
<router-link to="/">Home</router-link>
<router-link to="/helloworld">Hello World</router-link>
<router-link to="/bigimg">Big Img</router-link>
Additionally, there's the main.js file:
import Vue from "vue";
import App from "./App";
import router from "./router";
import Spinner from "./components/Spinner";
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: "#app",
router,
components: {
App,
Spinner
},
template: "<App/>"
});
router.beforeEach((to, from, next) => {
console.log("next page");
//loading = true
next();
});
router.afterEach((to, from) => {
//setTimeout(() => (loading = false), 1500);
});
I want the Spinner Loader to activate when the main page (Home.vue) loads, as well as when navigating to other pages within the project.
Question: How can I trigger the loader to be displayed when loading the main page (Home) and also when navigating to other pages of the project?