Nuxt/docs/3.api/1.components/5.nuxt-loading-indicator.md

title	description	links
<NuxtLoadingIndicator>	Display a progress bar between page navigations.	label icon to size Source i-simple-icons-github https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/components/nuxt-loading-indicator.ts xs

Usage

Add <NuxtLoadingIndicator/> in your app.vue or layouts/.

<template>
  <NuxtLoadingIndicator />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

:link-example{to="/docs/examples/routing/pages"}

Slots

You can pass custom HTML or components through the loading indicator's default slot.

Props

• color: The color of the loading bar. It can be set to false to turn off explicit color styling.
• height: Height of the loading bar, in pixels (default 3).
• duration: Duration of the loading bar, in milliseconds (default 2000).
• throttle: Throttle the appearing and hiding, in milliseconds (default 200).

::callout This component is optional. :br To achieve full customization, you can implement your own one based on its source code. ::

::callout You can hook into the underlying indicator instance using the useLoadingIndicator composable, which will allow you to trigger start/finish events yourself. ::