---
title: "<NuxtLoadingIndicator>"
description: "在页面导航之间显示进度条。"
canonical_url: "https://nuxt.zhcndoc.com/docs/4.x/api/components/nuxt-loading-indicator"
---
# \<NuxtLoadingIndicator>

> 在页面导航之间显示进度条。

## 用法

在 [`app.vue`](https://nuxt.zhcndoc.com/docs/4.x/directory-structure/app/app) 或 [`app/layouts/`](https://nuxt.zhcndoc.com/docs/4.x/directory-structure/app/layouts) 中添加 `<NuxtLoadingIndicator/>`。

```vue [app/app.vue]
<template>
  <NuxtLoadingIndicator />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
```

::link-example{to="https://nuxt.zhcndoc.com/docs/examples/routing/pages"}
::

## 插槽

你可以通过 loading indicator 的默认插槽传入自定义的 HTML 或组件。

## 属性

- `color`：加载条的颜色。可以设为 `false` 以关闭显式颜色样式。
- `errorColor`：当 `error` 设为 `true` 时加载条的颜色。
- `finishColor`：加载完成时加载条的颜色。默认使用 `color`。
- `height`：加载条的高度，单位为像素（默认值：`3`）。
- `duration`：加载条的持续时间，单位为毫秒（默认值：`2000`）。
- `throttle`：显示和隐藏的节流时间，单位为毫秒（默认值：`200`）。
- `estimatedProgress`：默认情况下，Nuxt 在进度接近 100% 时会逐渐放缓。你可以提供一个自定义函数来调整进度估算；该函数会收到加载条的持续时间（见上文）和已用时间，并应返回 0 到 100 之间的值。

::note
此组件是可选的。 :br
若要实现完全自定义，你可以基于 [其源码](https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/components/nuxt-loading-indicator.ts) 自行实现一个。
::

::note
你可以使用 [`useLoadingIndicator` 组合式函数](https://nuxt.zhcndoc.com/docs/4.x/api/composables/use-loading-indicator)接入底层的指示器实例，从而自行触发 start/finish 事件。
::

::tip
加载指示器在达到由 `estimatedProgress` 控制的特定点后，其速度会逐渐减慢。此调整能更准确地反映较长的页面加载时间，并防止指示器过早显示 100% 完成。
::

---

- [源码](https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/components/nuxt-loading-indicator.ts)


## Sitemap

See the full [sitemap](https://nuxt.zhcndoc.com/sitemap.md) for all pages.