logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
5.25.2
  • 组件总览
  • 通用
    • Button按钮
    • FloatButton悬浮按钮
      5.0.0
    • Icon图标
    • Typography排版
  • 布局
    • Divider分割线
    • Flex弹性布局
      5.10.0
    • Grid栅格
    • Layout布局
    • Space间距
    • Splitter分隔面板
      5.21.0
  • 导航
    • Anchor锚点
    • Breadcrumb面包屑
    • Dropdown下拉菜单
    • Menu导航菜单
    • Pagination分页
    • Steps步骤条
    • Tabs标签页
  • 数据录入
    • AutoComplete自动完成
    • Cascader级联选择
    • Checkbox多选框
    • ColorPicker颜色选择器
      5.5.0
    • DatePicker日期选择框
    • Form表单
    • Input输入框
    • InputNumber数字输入框
    • Mentions提及
    • Radio单选框
    • Rate评分
    • Select选择器
    • Slider滑动输入条
    • Switch开关
    • TimePicker时间选择框
    • Transfer穿梭框
    • TreeSelect树选择
    • Upload上传
  • 数据展示
    • Avatar头像
    • Badge徽标数
    • Calendar日历
    • Card卡片
    • Carousel走马灯
    • Collapse折叠面板
    • Descriptions描述列表
    • Empty空状态
    • Image图片
    • List列表
    • Popover气泡卡片
    • QRCode二维码
      5.1.0
    • Segmented分段控制器
    • Statistic统计数值
    • Table表格
    • Tag标签
    • Timeline时间轴
    • Tooltip文字提示
    • Tour漫游式引导
      5.0.0
    • Tree树形控件
  • 反馈
    • Alert警告提示
    • Drawer抽屉
    • Message全局提示
    • Modal对话框
    • Notification通知提醒框
    • Popconfirm气泡确认框
    • Progress进度条
    • Result结果
    • Skeleton骨架屏
    • Spin加载中
    • Watermark水印
      5.1.0
  • 其他
    • Affix固钉
    • App包裹组件
      5.1.0
    • ConfigProvider全局化配置
    • Util工具类
      5.13.0

Progress
进度条

展示操作的当前进度。
使用import { Progress } from "antd";
源码components/progress
文档
编辑此页更新日志

相关资源

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-首页模板集
Scaffolds-脚手架市场
Umi-React 应用开发框架
dumi-组件/文档研发工具
qiankun-微前端框架
Ant Motion-设计动效
国内镜像站点 🇨🇳

社区

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconf logoSEE Conf-蚂蚁体验科技大会
加入我们

帮助

GitHub
更新日志
常见问题
报告 Bug
议题
讨论区
StackOverflow
SegmentFault

Ant XTech logo更多产品

yuque logo语雀-构建你的数字花园
AntV logoAntV-数据可视化解决方案
Egg logoEgg-企业级 Node.js 框架
Kitchen logoKitchen-Sketch 工具集
Galacean logoGalacean-互动图形解决方案
xtech logo蚂蚁体验科技
主题编辑器
Made with ❤ by
蚂蚁集团和 Ant Design 开源社区
开发
设计

何时使用

在操作需要较长时间才能完成时,为用户显示该操作的当前进度和状态。

  • 当一个操作会打断当前界面,或者需要在后台运行,且耗时可能超过 2 秒时;
  • 当需要显示一个操作完成的百分比时。

代码演示

30%
50%
进度条

标准的进度条。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
30%
50%
小型进度条

适合放在较狭窄的区域内。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
30%
小型进度圈

小一号的圈形进度。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
75 Days
Done
自定义文字格式

format 属性指定格式。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
60%
60%
60%
分段进度条

分段展示进度,可以用于细化进度语义。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
99.9%
50%
90%
93%
90%
93%
自定义进度条渐变色

渐变色封装,circle 与 dashboard 设置渐变时 strokeLinecap 会被忽略。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Custom count:
Custom gap:
50%
步骤进度圈

步骤进度圈,支持颜色分段展示,默认间隔为 2px。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
5.16.0
0%
10%
50%
60%
100%
60%
60%
改变进度数值位置

改变进度数值位置,可使用 percentPosition 调整,使进度条数值在进度条内部、外部或底部。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
5.18.0
75%
进度圈

圈形的进度。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
代码发布
响应式进度圈

响应式的圈形进度,当 width 小于等于 20 的时候,进度信息将不会显示在进度圈里面,而是以 Tooltip 的形式显示。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
0%
0%
动态展示

会动的进度条才是好进度条。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
75%
75%
仪表盘

通过设置 type=dashboard,可以很方便地实现仪表盘样式的进度条。若想要修改缺口的角度,可以设置 gapDegree 为你想要的值。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
75%
75%
75%
边缘形状

通过设定 strokeLinecap="butt" 可以将进度条边缘的形状从闭合的圆形的圆弧调整为断口,详见 stroke-linecap。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
50%
30%
60%
步骤进度条

带步骤的进度条。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
50%
50%
50%
50%
50%
50%
50%
50%
50%
50%
50%
尺寸

进度条尺寸。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

API

通用属性参考:通用属性

各类型共用的属性。

属性说明类型默认值版本
format内容的模板函数function(percent, successPercent)(percent) => percent + %-
percent百分比number0-
showInfo是否显示进度数值或状态图标booleantrue-
status状态,可选:success exception normal active(仅限 line)string--
strokeColor进度条的色彩string--
strokeLinecap进度条的样式round | butt | square,区别详见 stroke-linecapround-
success成功进度条相关配置{ percent: number, strokeColor: string }--
trailColor未完成的分段的颜色string--
type类型,可选 line circle dashboardstringline-
size进度条的尺寸number | [number | string, number] | { width: number, height: number } | "small" | "default""default"5.3.0, Object: 5.18.0

type="line"

属性说明类型默认值版本
steps进度条总共步数number--
rounding用于四舍五入数值的函数(step: number) => numberMath.round5.24.0
strokeColor进度条的色彩,传入 object 时为渐变。当有 steps 时支持传入一个数组。string | string[] | { from: string; to: string; direction: string }-4.21.0: string[]
percentPosition进度数值位置,传入对象,align 表示数值的水平位置,type 表示数值在进度条内部还是外部{ align: string; type: string }{ align: "end", type: "outer" }5.18.0

type="circle"

属性说明类型默认值版本
steps进度条总共步数,传入 object 时,count 指步数,gap 指间隔大小。传 number 类型时,gap 默认为 2。number | { count: number, gap: number }-5.16.0
strokeColor圆形进度条线的色彩,传入 object 时为渐变string | { number%: string }--
strokeWidth圆形进度条线的宽度,单位是进度条画布宽度的百分比number6-

type="dashboard"

属性说明类型默认值版本
steps进度条总共步数,传入 object 时,count 指步数,gap 指间隔大小。传 number 类型时,gap 默认为 2。number | { count: number, gap: number }-5.16.0
gapDegree仪表盘进度条缺口角度,可取值 0 ~ 295number75-
gapPosition仪表盘进度条缺口位置top | bottom | left | rightbottom-
strokeWidth仪表盘进度条线的宽度,单位是进度条画布宽度的百分比number6-

主题变量(Design Token)

组件 Token如何定制?
Token 名称描述类型默认值
circleIconFontSize圆形进度条图标大小string1.1666666666666667em
circleTextColor圆形进度条文字颜色stringrgba(0,0,0,0.88)
circleTextFontSize圆形进度条文本大小string1em
defaultColor进度条默认颜色string#1677ff
lineBorderRadius条状进度条圆角number100
remainingColor进度条剩余部分颜色stringrgba(0,0,0,0.06)
全局 Token如何定制?