mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-26 23:52:06 +00:00
43 lines
1.3 KiB
Markdown
43 lines
1.3 KiB
Markdown
|
---
|
||
|
|
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>
|
||
|
|
<NuxtLayout>
|
||
|
|
<div>
|
||
|
|
<NuxtLoadingIndicator /> <!-- here -->
|
||
|
|
<NuxtPage />
|
||
|
|
</div>
|
||
|
|
</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](https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/components/nuxt-loading-indicator.ts).
|
||
|
|
::
|