# @agney/react-loading 中文文档

规范地址：https://npmcn.com/package/%40agney/react-loading/

版本：0\.1\.2
npm 元数据更新时间：2022-04-04T12:00:05.882Z
中文译文更新时间：2026-11-06T01:49:55.482Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40agney/react-loading
原文对照：https://npmcn.com/package/%40agney/react-loading/?lang=original
项目主页：https://agneym.github.io/react-loading/
源码仓库：https://github.com/agneym/react-loading

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：130 kB，32 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=10
- 运行依赖：1 个
- peer 依赖：react \>=16
- 首次发布：2020-10-04T09:58:47.821Z
- 最新版本发布：2020-10-04T17:04:03.454Z
- 近 30 天下载量：6977（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：2（近 12 个月 0 个）

## 中文简介

## 反应加载

使用 React 的简单且可访问的加载指标 .  
  
[![](https://badge.fury.io/js/%40agney%2Freact-loading.svg)](https://www.npmjs.com/package/@agney/react-loading)

## 安装

```sh
npm install @agney/react-loading
```

也可以使用：`pnpm add @agney/react-loading`、`yarn add @agney/react-loading`、`bun add @agney/react-loading`

## README

## 反应加载

使用 React 的简单且可访问的加载指标 .  
  
 [![](https://badge.fury.io/js/%40agney%2Freact-loading.svg)](https://www.npmjs.com/package/@agney/react-loading)![](https://img.shields.io/badge/module%20formats-cjs%2C%20esm-green.svg)  
 [![](https://github.com/agneym/react-loading/workflows/CI/badge.svg)](https://github.com/agneym/react-loading/actions)[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square) ](https://prettier.io/)[![](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com/)

与反应组件捆绑在一起 [Sam Herbert的动画 SVG 加载器](https://github.com/SamHerbert/SVG-Loaders) 在可动摇的树上.

![Example of loading indicator SVGs](https://npmcn.com/package/%40agney/react-loading/example/indicator.gif)

## 安装

```bash
npm i @agney/react-loading
# OR
yarn add @agney/react-loading
```

[演示](https://agneym.github.io/react-loading/)

## 特征

-   小号
    
    整个图书馆都是关于 [20kB 已微调](https://bundlephobia.com/result?p=@agney/react-loading)。 。 。 . _但你不会需要整个包._
    
    库是用来摇摆树木的 当你使用一两个被捆绑的加载器时, 你就会有不到1克B的被捆绑.
    
-   无障碍
    
    提供您装入组件和容器的无障碍属性.
    
    `aria-busy` 设置为 `true` 载货量和进度指标 `role=progressbar`。 。 。 .
    
-   指定全局加载器
    
    您可能不希望加载器组件在任何地方混合,所以您可以指定一个 `LoaderContext` 如果有必要,以后可以推翻.
    
-   带上你自己的装载机
    
    如果你决定带上自己的加载指示器,库也会支持这一点,保持所有逻辑不变.
    
-   类型脚本支持. 零额外CSS.
    

## 使用量

```javascript
import { useLoading, Audio } from '@agney/react-loading';

function Content() {
  const { containerProps, indicatorEl } = useLoading({
    loading: true,
    indicator: <Audio width="50" />,
  });

  return (
    {/* Accessibility props injected to container */}
    <section {...containerProps}>
      {indicatorEl} {/* renders only while loading */}
    </section>
  );
}
```

## 装入器

这个库与 React 组件捆绑在一起 [Sam Herbert的动画 SVG 加载器](https://github.com/SamHerbert/SVG-Loaders) 在可动摇的树上.

每个装载机都是SVG,所通过道具应被应用到顶部SVG元件上. 所有 SVG 将被设定为继承 `currentColor` 从它的父母的填充/中空.

可用的装载器有:

```javascript
import {
  Audio,
  BallTriangle,
  Bars,
  Circles,
  Grid,
  Hearts,
  Oval,
  Puff,
  Rings,
  SpinningCircles,
  TailSpin,
  ThreeDots,
} from '@agney/react-loading';
```

使用Webpack/Rollup等捆绑器时,只包含您使用的那些.

## A. 背景情况

您可以指定单个加载指示器, 并使用 `LoaderProvider`。 。 。 .

```javascript
import { LoaderProvider, useLoading, BallTriangle } from '@agney/react-loading';

function App() {
  const { containerProps, indicatorEl } = useLoading({
    loading: true,
  });
  return <section {...containerProps}>{indicatorEl}</section>;
}

ReactDOM.render(
  <LoaderProvider indicator={<BallTriangle width="50" />}>
    <App />
  </LoaderProvider>
);
```

你可以用这么多 `LoaderProvider` 您喜欢的提供者元素和React会选择最接近您正在渲染的钩子的元素.

[更多关于反应背景](https://reactjs.org/docs/context.html)

## 装入器上的额外道具

如果您想在装入器上提供特定的道具, 使用钩子时:

```javascript
useLoading({
  loading: true,
  loaderProps: {
    // Any props here would be spread on to the indicator element.
    style: {{ margin: '0 auto' }}
  }
});
```

我们还为 `valueText`,用于描述:

```javascript
useLoading({
  loading: true,
  loaderProps: {
    valueText: 'Fetching video from the Great Internet',
  },
});

// now this will generate:
/* <svg role="progressbar" aria-valuetext="Fetching video from the Great Internet"></svg>*/
```

`aria-valuetext` 将被屏幕阅读者读取.

您也可以提供 `aria-valuenow` (但预先捆绑的指标最适合不确定的进展指标)

[用于参考的 MDN `progressbar`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role)

## 带上你自己的装载机

只要将导入切换到您自己的加载指示器( 只要确保它接受道具)

```javascript
import { LoaderProvider, useLoading } from '@agney/react-loading';

const Loader = ({ ...rest }) => <p {...rest}>Loading...</p>;

function App() {
  const { containerProps, indicatorEl } = useLoading({
    loading: true,
  });
  return <section {...containerProps}>{indicatorEl}</section>;
}

ReactDOM.render(
  <LoaderProvider indicator={<Loader />}>
    <App />
  </LoaderProvider>
);
```

# 捐款

所有公关都欢迎.

## 发展

我们用 [`tsdx`](https://github.com/formium/tsdx) 用来生产锅炉板.

**安装 :**

```bash
# Library
npm i

# Example
cd example && npm i
```

**发展:**

```bash
# Running library dev
npm start

# Running example
cd example && npm start
```

**测试 :**

测试 `react-testing-library` 财务报告和审定财务报表 `jest`

```bash
npm test
```

在tsdx寄存器上可以详细获取命令.

## 常见问题

### @agney/react-loading 是什么？

反应加载 使用 React 的简单且可访问的加载指标 \.

### 如何安装 @agney/react-loading？

在项目目录运行 npm install @agney/react-loading，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=16）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @agney/react-loading 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @agney/react-loading 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @agney/react-loading 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=10。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @agney/react-loading 可以商用吗？

@agney/react-loading 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @agney/react-loading 的下载量有多少？

根据 npm 官方下载统计，@agney/react-loading 在 2026/10/05 – 2026/11/03 这 30 天内被下载 6,977 次，日均约 233 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @agney/react-loading 还在维护吗？

最新版本 0\.1\.2 发布于 2020/10/05（6 年前）；至今共发布 2 个版本，其中过去 12 个月发布了 0 个；首次发布于 2020/10/04。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。