如何用Antd与Tailwind创建仪表盘式进度条并修复透明描边异常

架构老林

2026-7-31

解决Antd仪表盘进度条叠加显示问题

核心问题

当你把success.strokeColor设为transparent时，Antd Progress组件的默认底层轨道会自动显示，覆盖了你下层的彩色div。而设置具体颜色时，success轨道会覆盖默认底层轨道，所以能正常透出下层颜色。

修复方案

方案1：保留叠加div结构，隐藏默认底层轨道

通过自定义样式把Progress的底层轨道设为透明，让下层彩色背景正常透出：

import { Progress } from 'antd';

// 彩色背景层
const ColoredBg = () => (
  <div className="absolute inset-0 rounded-full bg-gradient-to-r from-green-400 via-blue-500 to-purple-600" />
);

const CustomDashboardProgress = ({ percent }) => {
  return (
    <div className="relative w-48 h-48">
      <ColoredBg />
      <Progress
        type="dashboard"
        percent={percent}
        strokeWidth={12}
        success={{ percent: 100, strokeColor: 'transparent' }}
        className="transparent-trail-progress"
      />
    </div>
  );
};

添加全局样式（或在Tailwind中自定义）：

.transparent-trail-progress .ant-progress-circle-trail {
  stroke: transparent;
}

方案2：直接用渐变进度条，无需额外div

更简洁的方式是利用Antd Progress的strokeColor支持渐变的特性，省去叠加div的步骤：

import { Progress } from 'antd';

const CustomDashboardProgress = ({ percent }) => {
  return (
    <Progress
      type="dashboard"
      percent={percent}
      strokeWidth={12}
      strokeColor={{
        '0%': '#10b981',
        '50%': '#3b82f6',
        '100%': '#8b5cf6',
      }}
      trailColor="transparent"
    />
  );
};