---
title: "useLoadingIndicator"
description: "这个组合式函数让你可以访问应用页面的加载状态。"
canonical_url: "https://nuxt.zhcndoc.com/docs/4.x/api/composables/use-loading-indicator"
---
# useLoadingIndicator

> 这个组合式函数让你可以访问应用页面的加载状态。

## 描述

一个返回页面加载状态的组合式函数。由 [`<NuxtLoadingIndicator>`](https://nuxt.zhcndoc.com/docs/4.x/api/components/nuxt-loading-indicator) 使用，并且可以进行控制。
它会挂接到 [`page:loading:start`](https://nuxt.zhcndoc.com/docs/4.x/api/advanced/hooks#app-hooks-runtime) 和 [`page:loading:end`](https://nuxt.zhcndoc.com/docs/4.x/api/advanced/hooks#app-hooks-runtime)，以改变其状态。

## 参数

- `duration`: 加载条的持续时间，单位为毫秒（默认 `2000`）。
- `throttle`: 控制显示和隐藏的节流时间，单位为毫秒（默认 `200`）。
- `estimatedProgress`: 默认情况下，Nuxt 在接近 100% 时会放缓。你可以提供一个自定义函数来定制进度估算，该函数接收加载条的持续时间（上述）和已耗时。它应返回 0 到 100 之间的数值。

## 属性

### `isLoading`

- **类型**: `Readonly<ShallowRef<boolean>>`
- **描述**: 加载状态

### `error`

- **类型**: `Readonly<ShallowRef<boolean>>`
- **描述**: 错误状态

### `progress`

- **类型**: `Readonly<ShallowRef<number>>`
- **描述**: 进度状态。范围从 `0` 到 `100`。

## 方法

### `start()`

将 `isLoading` 设为 true 并开始增加 `progress` 值。`start` 接受一个 `{ force: true }` 选项以跳过间隔并立即显示加载状态。

### `set()`

将 `progress` 值设置为特定值。`set` 接受一个 `{ force: true }` 选项以跳过间隔并立即显示加载状态。

### `finish()`

将 `progress` 值设为 `100`，停止所有定时器和间隔，然后在 500 毫秒后重置加载状态。`finish` 接受 `{ force: true }` 选项以在状态重置前跳过间隔，接受 `{ error: true }` 以改变加载条颜色并将 `error` 属性设置为 true。

### `clear()`

由 `finish()` 使用。清除该组合式函数使用的所有定时器和间隔。

## 示例

```vue
<script setup lang="ts">
const { progress, isLoading, start, finish, clear } = useLoadingIndicator({
  duration: 2000,
  throttle: 200,
  // 下面是默认的进度计算方式
  estimatedProgress: (duration, elapsed) => (2 / Math.PI * 100) * Math.atan(elapsed / duration * 100 / 50),
})
</script>
```

```vue
<script setup lang="ts">
const { start, set } = useLoadingIndicator()
// 等同于 set(0, { force: true })
// 将进度设为 0，并立即显示加载
start({ force: true })
</script>
```

---

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


## Sitemap

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