# @alptugidin/react-circular-progress-bar 中文文档

规范地址：https://npmcn.com/package/%40alptugidin/react-circular-progress-bar/

版本：1\.1\.4
npm 元数据更新时间：2024-09-05T18:07:56.957Z
中文译文更新时间：2026-11-06T20:09:18.777Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40alptugidin/react-circular-progress-bar
原文对照：https://npmcn.com/package/%40alptugidin/react-circular-progress-bar/?lang=original
项目主页：https://github.com/alptugidin/react-circular-progress-bar#readme
源码仓库：https://github.com/alptugidin/react-circular-progress-bar

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

- 包体积（解压后）：37.5 kB，5 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react \>=18\.0\.0，react-dom \>=18\.0\.0
- 首次发布：2022-12-29T18:43:30.654Z
- 最新版本发布：2024-09-05T18:07:56.781Z
- 近 30 天下载量：2397（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：7（近 12 个月 0 个）

## 中文简介

React 的自定义循环进度栏 .

## 安装

```sh
npm install @alptugidin/react-circular-progress-bar
```

也可以使用：`pnpm add @alptugidin/react-circular-progress-bar`、`yarn add @alptugidin/react-circular-progress-bar`、`bun add @alptugidin/react-circular-progress-bar`

## README

React 的自定义循环进度栏 .  
  
[演示](https://alptugidin.github.io/react-circular-progress-bar/)

  

 [![](https://badge.fury.io/js/@alptugidin%2Freact-circular-progress-bar.svg) ![npm](https://img.shields.io/npm/dm/@alptugidin/react-circular-progress-bar.svg)](https://www.npmjs.com/package/@alptugidin/react-circular-progress-bar)

  
![](https://user-images.githubusercontent.com/31244930/209894184-90420eb5-796f-4f75-83a0-8dcd9b6d7192.gif)

  

# 安装

```bash
npm install @alptugidin/react-circular-progress-bar
```

或者说

```bash
yarn add @alptugidin/react-circular-progress-bar
```

# 导入

```javascript
import {Flat, Heat, Nested} from '@alptugidin/react-circular-progress-bar'
```

# 使用量

## 平调

```jsx
<Flat  
   progress={50}
   range={{ from: 0, to: 100 }}
   sign={{ value: '%', position: 'end' }}
   text={'Match'}
   showMiniCircle={true}
   showValue={true}
   sx={{
     strokeColor: '#ff0000',
     barWidth: 5, 
     bgStrokeColor: '#ffffff',
     bgColor: { value: '#000000', transparency: '20' },  
     shape: 'full',
     strokeLinecap: 'round',
     valueSize: 13,
     valueWeight: 'bold',
     valueColor: '#000000',
     valueFamily: 'Trebuchet MS',
     textSize: 13,
     textWeight: 'bold',
     textColor: '#000000',
     textFamily: 'Trebuchet MS',
     loadingTime: 1000,
     miniCircleColor: '#ff0000',
     miniCircleSize: 5,
     valueAnimation: true,
     intersectionEnabled: true
   }}
/>
```

## 道具

| 专利名称 | 类型 | 需求 | 说明 |
| --- | --- | --- | --- |
| 进展 | 编号 | 对 | 进步栏的进展值从0到100不等. |
| 范围 | 对象 | 没有 | 包含 `from` 财务报告和审定财务报表 `to` 进度栏的值。 默认值为 `{ from: 0, to: 100 }`。 。 。 . |
| 签名 | 对象 | 没有 | 包含 `value` 财务报告和审定财务报表 `position` 用于在进度栏中显示的标志。 这个 `value` 可以是弦,和 `position` 也可以这样 `'start'` 或者说 `'end'`。默认值是 `{ value: '%', position: 'end' }`。 。 。 . |
| 文本 | 字符串 | 没有 | 进度栏上方显示的文本 . |
| 显示密尼环形 | 布尔 | 没有 | 表示是否在进步栏尾显示一个迷你圆的旗帜 。 默认值为 `true`。 。 。 . |
| 显示值 | 布尔 | 没有 | 表示是否在进度栏中显示进度值的旗帜 。 默认值为 `true`。 。 。 . |
| 轴 | 对象 | 没有 | 包含 CSS 样式以自定义进度栏的外观对象 . |

## 样式

| 财产 | 类型 | 说明 |
| --- | --- | --- |
| 窗口 | 编号 | 进度栏的宽度 . |
| 中风颜色 | 字符串 | 活动进度栏的颜色 . |
| bgStroke 颜色 | 字符串 | 背景进度栏的颜色 . |
| bg 颜色 | 对象 | 背景进度栏的颜色 。 它有两个属性: `value`: 十六进制颜色和 `transparency`: 00-99之间的数字(作为字符串) |
| 形状 | 字符串 | 进步栏的形状. 可能会 `'full'`, (中文(简体) ), `'half'` 或者说 `'threequarters'`。 。 。 . |
| 中风线盖 | 字符串 | 进步栏的行盖样式. 可能会 `'butt'`, (中文(简体) ), `'round'`,或 `'square'`。 。 。 . |
| 数值大小 | 编号 | 进度值的字体大小 . |
| 数值 | 字符串 | 进度值的字体权重 . |
| 颜色 | 字符串 | 进度值的颜色 . |
| 价值家庭 | 字符串 | 进步值的字体家族 . |
| 文本大小 | 编号 | 进度栏上方文字的字体大小. |
| 文字重量 | 字符串 | 进度栏上方文字的字体权重. |
| 文本颜色 | 字符串 | 进度栏上方文字的颜色. |
| 文本家庭 | 字符串 | 进度栏上方文字的字体家族. |
| 装入时间 | 编号 | 进度栏从 0 到指定进度值所需的时间. |
| 小型自行车 | 字符串 | 进取栏尾的迷你圆圈颜色. |
| 小型环绕大小 | 编号 | 进取栏尾的迷你圆圈大小. |
| 数值动画 | 布尔 | 表示是否激活进度值的旗帜 . |
| 相交点 | 布尔 | 表示是否使用相交观察器的旗帜, 只在屏幕上可见时才开始加载进度栏 。 默认值为 `true`。 。 。 . |

* * *

## 热量

```jsx
<Heat
  progress={50}
  range ={{ from: 0, to: 100 }}
  sign={{ value: '%', position: 'end' }}
  showValue={true}
  revertBackground={false}
  text={'Match'}
  sx={{
    barWidth: 5,
    bgColor: '#dadada',
    shape: 'half',
    valueSize: 13,
    textSize: 13,
    valueFamily: 'Trebuchet MS',
    textFamily: 'Trebuchet MS',
    valueWeight: 'normal',
    textWeight: 'normal',
    textColor: '#000000',
    valueColor: '#000000',
    loadingTime: 1000,
    strokeLinecap: 'round',
    valueAnimation: true,
    intersectionEnabled: true
  }}
/>
```

## 道具

| Prop | 类型 | 说明 |
| --- | --- | --- |
| 进展 | 编号 | 进步栏的进展值从0到100不等. |
| 范围 | 对象 | 包含 `from` 财务报告和审定财务报表 `to` 进度栏的值。 默认值为 `{ from: 0, to: 100 }`。 。 。 . |
| 签名 | 对象 | 包含 `value` 财务报告和审定财务报表 `position` 用于在进度栏中显示的标志。 这个 `value` 可以是弦,和 `position` 也可以这样 `'start'` 或者说 `'end'`。默认值是 `{ value: '%', position: 'end' }`。 。 。 . |
| 显示值 | 布尔 | 表示是否在进度栏中显示进度值的旗帜 。 默认值为 `true`。 。 。 . |
| 回转背景 | 布尔 | 表示是否反转进度栏颜色的旗帜 。 若为 `true`,背景颜色将像红色一样开始并随着进度值的增加而逐渐变成绿色. 默认值为 `false`。 。 。 . |
| 文本 | 字符串 | 进度栏上方显示的文本 . |
| 轴 | 对象 | 包含 CSS 样式以自定义进度栏的外观对象 . |

## 样式

| 财产 | 类型 | 说明 |
| --- | --- | --- |
| 窗口 | 编号 | 进度栏的宽度 . |
| bg 颜色 | 字符串 | 进度栏的背景颜色 . |
| 形状 | 字符串 | 进步栏的形状. 可能会 `'full'` 或者说 `'half'`。 。 。 . |
| 数值大小 | 编号 | 进度值的字体大小 . |
| 文本大小 | 编号 | 进度栏上方文字的字体大小. |
| 价值家庭 | 字符串 | 进步值的字体家族 . |
| 文本家庭 | 字符串 | 进度栏上方文字的字体家族. |
| 数值 | 字符串 | 进度值的字体权重 . |
| 文字重量 | 字符串 | 进度栏上方文字的字体权重. |
| 文本颜色 | 字符串 | 进度栏上方文字的颜色. |
| 颜色 | 字符串 | 进度值的颜色 . |
| 装入时间 | 编号 | 进度栏从 0 到指定进度值所需的时间. |
| 中风线盖 | 字符串 | 进步栏的行盖样式. 可能会 `'butt'`, (中文(简体) ), `'round'`,或 `'square'`。 。 。 . |
| 数值动画 | 布尔 | 表示是否激活进度值的旗帜 . |
| 相交点 | 布尔 | 表示是否使用相交观察器的旗帜, 只在屏幕上可见时才开始加载进度栏 。 默认值为 `true`。 。 。 . |

* * *

## 嵌入

```jsx
<Nested
  circles={[
    {text: 'Javascript', value: 20, color: '#fde047'},
    {text: 'Typescript' ,value: 50, color: '#0ea5e9'},
    {text: 'HTML', value: 8, color: '#c2410c'},
    {text: 'CSS', value: 12, color: '#7c3aed'},
    {text: 'SASS', value: 10, color: '#c026d3'}
  ]}
  sx={{
    bgColor: '#cbd5e1',
    fontWeight: 'bold',
    fontFamily: 'Trebuchet MS',
    strokeLinecap: 'round',
    loadingTime: 1000,
    valueAnimation: true,
    intersectionEnabled: true
  }}
/>
```

## 道具

| Prop | 类型 | 说明 |
| --- | --- | --- |
| 圆 | 数组 | 包含嵌入式进度栏中每个圆的属性的一系列对象。 每个物体应有一个 `text` 字符串, a `value` 数字,和 a `color` 绳子。 至少有两个圈子 最多5点. |
| 轴 | 对象 | 包含 CSS 样式,用于自定义嵌入式进度栏的外观对象. |

## 样式

| 财产 | 类型 | 说明 |
| --- | --- | --- |
| bg 颜色 | 字符串 | 筑巢进度栏的背景颜色. |
| 字体重量 | 字符串 | 嵌入式进度栏中文字的字体重. |
| 字体家庭 | 字符串 | 巢中文字的字体家族 . |
| 中风线盖 | 字符串 | 嵌入式进步栏中圆圈的行盖样式. 可能会 `'butt'`, (中文(简体) ), `'round'`,或 `'square'`。 。 。 . |
| 装入时间 | 编号 | 嵌入式进取栏中的圆圈从0到指定值的动能需要时间. |
| 数值动画 | 布尔 | 表示是否在嵌入式进度栏的圆圈中将数值激活的旗帜 . |
| 相交点 | 布尔 | 表示是否使用相交观察器的旗帜, 只在屏幕上可见时才开始装入被嵌入的进度栏 。 默认值为 `true`。 。 。 . |

* * *

## 许可证

[麻省理工学院](https://choosealicense.com/licenses/mit/) 阿尔普图·伊丁

## 常见问题

### @alptugidin/react-circular-progress-bar 是什么？

React 的自定义循环进度栏 \.

### 如何安装 @alptugidin/react-circular-progress-bar？

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

### @alptugidin/react-circular-progress-bar 支持 TypeScript 吗？

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

### @alptugidin/react-circular-progress-bar 支持 ESM 还是 CommonJS？

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

### @alptugidin/react-circular-progress-bar 可以商用吗？

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

### @alptugidin/react-circular-progress-bar 的下载量有多少？

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

### @alptugidin/react-circular-progress-bar 还在维护吗？

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