The loading indicator Property

Show fancy loading indicator while page is loading!

Without Server Side Rendering (when ssr option is false), there is no content from the server side on the first page load. So, instead of showing a blank page while the page loads, we may show a spinner.

This property can have 3 different types: string or false or object. If a string value is provided it is converted to object style.

Default value is:

  1. loadingIndicator: {
  2.   name: 'circle',
  3.   color: '#3B8070',
  4.   background: 'white'
  5. }

Built-in indicators

These indicators are imported from the awesome SpinKit project. You can use its demo page to preview spinners.

  • circle
  • cube-grid
  • fading-circle
  • folding-cube
  • chasing-dots
  • nuxt
  • pulse
  • rectangle-bounce
  • rotating-plane
  • three-bounce
  • wandering-cubes

Built-in indicators support color and background options.

Custom indicators

If you need your own special indicator, a String value or Name key can also be a path to an HTML template of indicator source code! All of the options are passed to the template, too.

Nuxt’s built-in source code is also available if you need a base!