Loading Vue

App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>

    <transition name="fade">
      <Loading v-if="loading" />
    </transition>

    <router-view v-if="loading != true" />
  </div>
</template>

<script>
import Loading from './components/Loading.vue'

export default {
  computed: {
    loading() {
      return this.$store.state.loading;
    }
  },
  components: {
    Loading
  }
}
</script>

<style lang="scss">
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>

Loading.vue

<template>
    <div>
        <svg id="load" x="0px" y="0px" viewBox="0 0 150 150">
            <circle id="loading-inner" cx="75" cy="75" r="60"/>
        </svg>
    </div>
</template>

<style lang="scss">
#load {
	width: 150px;
    animation: loading 3s linear infinite;
    #loading-inner {
		  stroke: {
        dashoffset: 0;
        dasharray: 300;
        width: 10;
        miterlimit: 10;
        linecap: round;
      }
      animation: loading-circle 2s linear infinite;
      stroke: #51BBA7;
      fill: transparent;
    }
}

@keyframes loading {
		0% { 
      transform: rotate(0); 
    }
		100% { 
      transform: rotate(360deg);
    }
}
@keyframes loading-circle {
		0% { 
      stroke-dashoffset: 0
    }
		100% { 
      stroke-dashoffset: -600;
    }
}
</style>

router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import store from './store'

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
});

router.beforeEach((to, from, next) => {

  if( to.name ) {
    store.dispatch('IS_LOADING');
  }

  next()
})

router.afterEach(() => {
  setTimeout(function() {
    store.dispatch('NOT_LOADING')
  }, 300);
})

export default router;

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    loading: true
  },
  mutations: {
    disableLoading( state ) {
      state.loading = false;
    },

    enableLoading( state ) {
      state.loading = true;
    }
  },
  actions: {
    NOT_LOADING() {
      this.commit('disableLoading');
    },

    IS_LOADING() {
      this.commit('enableLoading');
    }
  },
  beforeRouteEnter() {
    this.dispatch('IS_LOADING');
  }
})