如何使用Ant Design实现虚线样式进度条

Ant Design的Progress组件本身没有内置虚线样式的配置项，但可以通过自定义CSS轻松实现。

实现步骤： #

1. 在使用Progress组件时添加自定义类名

import { Progress } from 'antd';

// 给组件添加自定义类，用于后续样式修改
<Progress percent={60} className="dashed-progress" />

2. 编写自定义CSS样式
   根据需求选择对应方案：

方案一：仅已完成进度为虚线（轨道保持实线）

.dashed-progress .ant-progress-bg {
  /* 用重复线性渐变绘制虚线 */
  background-image: repeating-linear-gradient(
    to right,
    #1890ff, /* 进度条颜色 */
    #1890ff 12px, /* 虚线单段长度 */
    transparent 12px,
    transparent 20px /* 虚线间距 */
  );
  background-size: 100% 100%;
  /* 可选：移除默认圆角 */
  border-radius: 0;
}

方案二：轨道和进度都为虚线

.dashed-progress .ant-progress-inner {
  background: transparent;
  border-bottom: 4px dashed #e8e8e8; /* 轨道虚线样式 */
}

.dashed-progress .ant-progress-bg {
  height: 0;
  border-bottom: 4px dashed #1890ff; /* 进度虚线样式 */
  background: transparent;
}

自定义调整 #

可以按需修改CSS参数：

• 调整12px和20px改变虚线的线段长度与间距
• 修改#1890ff和#e8e8e8替换进度条和轨道的颜色
• 修改4px调整虚线的粗细

内容的提问来源于stack exchange，提问作者Dayoolacodes