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

50 lines
2.0 KiB
Markdown
Raw Normal View History

---
title: '<NuxtLoadingIndicator>'
description: 'Display a progress bar between page navigations.'
links:
- label: Source
icon: i-simple-icons-github
to: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/components/nuxt-loading-indicator.ts
size: xs
---
## Usage
Add `<NuxtLoadingIndicator/>` in your [`app.vue`](/docs/guide/directory-structure/app) or [`layouts/`](/docs/guide/directory-structure/layouts).
```vue [app.vue]
<template>
2023-12-18 10:20:04 +00:00
<NuxtLoadingIndicator />
<NuxtLayout>
2023-12-18 10:20:04 +00:00
<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`).
- `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.
::callout
This component is optional. :br
To achieve full customization, you can implement your own one based on [its source code](https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/components/nuxt-loading-indicator.ts).
::
::callout
You can hook into the underlying indicator instance using [the `useLoadingIndicator` composable](/docs/api/composables/use-loading-indicator), which will allow you to trigger start/finish events yourself.
::
::callout
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.
::