HTML5 纯 CSS 背景进度条，自适应标签的宽度

一、效果

 

二、代码

1. CSS

.g-progress {
    margin: 0;
    background: linear-gradient(90deg, #0f0, #0ff var(--progress), transparent 0);
    transition: .3s --progress;
}

2. HTML 使用

<div class="g-progress" style="--progress: 21%">百分之二十一</div>
<td class="g-progress" style="--progress: 21%">21%</td>

三、使用说明

标签不限制, 因为是背景，并且自适应标签的宽度。

当然，如果你要明确指定标签宽度什么的，加样式 或css类等自定义。

动态变动的话，JS 更改 "--progress: 21%" 的值即可。