CSS实现渐进式进度圆环的绿色填充段效果

现有基础 #

你已经通过a::after伪元素完成了深色圆环基底的实现，现有代码如下：

a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 5px solid rgb(27, 26, 30);
    z-index: 1;
}

推荐实现方案（锥形渐变法，无额外DOM） #

这个方案不需要新增HTML标签，仅靠CSS伪元素和渐变就能实现效果，支持动态调整进度、添加过渡动画。

实现逻辑 #

• 给a标签本身设置锥形渐变背景，渐变角度直接对应进度占比，绿色段为填充部分，其余区域透明
• 用::before伪元素做中心遮罩，留出和边框等宽的环带显示进度
• 调整原有::after深色边框的层级，盖在进度层上方保证边框样式统一

完整参考代码 #

a {
    position: relative;
    /* 按你的实际需求设置宽高 */
    width: 80px;
    height: 80px;
    border-radius: 50%;
    /* 示例为20%进度（360deg * 20% = 72deg），修改角度值即可调整进度长度 */
    background: conic-gradient(#16a34a 0deg 72deg, transparent 72deg 360deg);
}

/* 中心空心遮罩，颜色替换为你圆环内部实际的背景色即可 */
a::before {
    content: "";
    position: absolute;
    /* 内边距和边框宽度一致，刚好露出5px宽的进度环 */
    inset: 5px;
    border-radius: 50%;
    background: #ffffff;
    z-index: 2;
}

/* 原有深色外圈边框，调整z-index到最高层 */
a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 5px solid rgb(27, 26, 30);
    z-index: 3;
}

动态进度适配 #

如果需要做渐进填充的动画效果，可以用CSS变量控制进度值，添加过渡属性即可：

a {
    /* 其余属性保持不变 */
    --progress: 20; /* 进度值范围0-100，对应0%-100%填充 */
    background: conic-gradient(
        #16a34a 0deg calc(var(--progress) * 3.6deg),
        transparent calc(var(--progress) * 3.6deg) 360deg
    );
    transition: --progress 0.5s ease;
}

修改--progress变量的值就能实时更新进度，比如进度100%时将变量设为100即可。

兼容提示：如果需要适配IE等不支持锥形渐变的老旧浏览器，可以换用SVG圆环方案，通过stroke-dasharray和stroke-dashoffset属性控制路径描边长度实现进度效果，实现逻辑和上述方案一致。

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