Hello guys, In this blog I will show you how we can add a loading indicator & customize it. 
When your project running Nuxt.js in SPA mode, there is no content from the server-side on the first-page load. Normally it will show a blank page while the page load. So, instead of showing a blank page while the page loads, Nuxt.js gives you a spinner/preloader that you can customize to add your own colors or background and even change the indicator. You can also add your own custom spinner.

When SSR(Server Side Rendering) is set to false the default Nuxt.js Spinner works out of the box.
Add  SSR: false inside nuxt.config.js file:

export default {
 ssr: false
}

Active & Customize Loading Indicator:

You can activate the spinner on your Nuxt.js application by adding the loading indicator property of the nuxt.config.js inside the export default { //code here } with the corresponding properties.

To set a circle spinner with a custom color & white background, add the following code inside your project nuxt.config.js file.

export default {
 loadingIndicator: {
   name: 'circle',
   color: '#3B8070',
   background: 'white'
 }
}

You can use any type of spinner from these types:
Circle, cube-grid, fading-circle, folding-cube, chasing-dots, nuxt, pulse, rectangle-bounce, rotating-plane, three-bounce, wandering-cubes. 

export default {
	loadingIndicator: {
 		name: 'chasing-dots',
 		color: 'purple',
 		background: 'green'
	}
}

To see the demo you can go to SpinKit website because Nuxt.js indicators are imported from the SpinKit project.

Useful Links:

Official Nuxt Loading Docs.
Custom loading component example.