5.Nuxt Loading Indicator

Usage

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

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

:link-example{to="/docs/4.x/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.
• errorColor: The color of the loading bar when error is set to true.
• 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).
• estimatedProgress: By default Nuxt will back off as it approaches 100%. You can provide a custom function to customize the progress estimation, which is a function that receives the duration of the loading bar (above) and the elapsed time. It should return a value between 0 and 100.

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

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

::tip The loading indicator's speed gradually decreases after reaching a specific point controlled by estimatedProgress. This adjustment provides a more accurate reflection of longer page loading times and prevents the indicator from prematurely showing 100% completion. ::