为何HTML&CSS实现的相同5%数值环形进度条显示效果存在差异

问题根源 #

你遇到的进度展示不一致问题由两个核心逻辑错误导致：

1. 所有进度条右侧的progress-bar默认绑定了终点为180度旋转的loading-1动画，不管实际要显示的进度是多少都会先转满半圈，完全不符合小于50%进度的展示逻辑
2. 不同颜色类（red/dark-yellow/yellow/green）的左侧progress-bar绑定的动画终点角度是写死的，分别对应40%/10%/25%/35%的总进度，和你实际显示的5%完全无关，所以颜色不同进度展示自然不一样

解决方案 #

移除写死的固定动画逻辑，改为动态传入进度值控制旋转角度即可：

1. 先改造CSS，删除不同颜色类下绑定的固定动画规则，用CSS变量控制旋转角度，支持自定义过渡效果：

/* 删除原有.progress.* .progress-left .progress-bar的动画绑定规则，以及.progress-right .progress-bar的动画绑定规则，替换为以下代码 */
.progress .progress-right .progress-bar{
    left: -100%;
    border-top-left-radius: 80px;
    border-bottom-left-radius: 80px;
    border-right: 0;
    -webkit-transform-origin: center right;
    transform-origin: center right;
    transform: rotate(var(--right-rotate, 0deg));
    transition: transform 1.8s linear;
}
.progress .progress-left .progress-bar{
    left: 100%;
    border-top-right-radius: 80px;
    border-bottom-right-radius: 80px;
    border-left: 0;
    -webkit-transform-origin: center left;
    transform-origin: center left;
    transform: rotate(var(--left-rotate, 0deg));
    transition: transform 1.5s linear 1.8s;
}

2. 后端输出HTML时，根据实际进度计算两个进度条的旋转角度，通过内联样式传入CSS变量：

<?php
// 循环内的逻辑
$percent = 5; // 替换为你实际的进度值
$total_rotate = 3.6 * $percent; // 1%对应3.6度，360度为满值
$right_rotate = min($total_rotate, 180); // 右侧最多转180度（半圈）
$left_rotate = max($total_rotate - 180, 0); // 超过半圈的部分由左侧旋转补足
$componentclass = 'red'; // 替换为实际的颜色类
?>
<div class="component-progress-info">
    <div class="component-progress">
        <div class="progress <?php echo $componentclass; ?>" 
             style="--right-rotate: <?php echo $right_rotate; ?>deg; --left-rotate: <?php echo $left_rotate; ?>deg;">
            <span class="progress-left">
                <span class="progress-bar"></span>
            </span>
            <span class="progress-right">
                <span class="progress-bar"></span>
            </span>
            <div class="progress-value <?php echo $componentclass; ?>"><?php echo $percent; ?>%</div>
        </div>
    </div>
    <div class="component-info">
        
    </div>
</div>

改造完成后，循环生成的所有同百分比进度条的展示效果就会完全一致。

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