How can I create a custom loading indicator in Nuxt.js?

Question

Inside this page (https://nuxtjs.org/api/configuration-loading-indicator#custom-indicators) says that I can create a custom loading indicator but not says how.

Somebody can help me - how to create and set this into to nuxt.config?

Answer 1

Here is a collection of default loading indicators in Nuxt.js source code.

Basically, you can specify the HTML template to use as a loadingIndicator in nuxt.config.js.

export default {
  ..., // Other Nuxt configuration

  // Simple usage:
  loadingIndicator: '~/custom-locading-indicator.html',

  // Or with dynamic configuration variables passed via lodash template syntax
  loadingIndicator: {
    name: '~/custom-locading-indicator.html',
    color: '#000',
    background: '#fff'
  }
}

Note, that indicators can have access to