巧用css变量和计数器，优雅解决进度条显示难题
在CSS样式设计中，灵活运用变量和字符串转换至关重要。本文以圆形进度条为例，讲解如何巧妙地将数值型CSS变量转换为带百分号的字符串，同时保留其数值计算功能。
问题：
假设我们用CSS变量--progress存储进度值（例如25）。我们需要用它计算进度条旋转角度（calc(var(--progress) * 3.6deg)），并将其以“25%”的形式显示。直接使用var(--progress)无法与百分号拼接，而转换为字符串后则无法参与calc计算。
解决方案：
立即学习“前端免费学习笔记（深入）”；
利用CSS的counter-reset和counter()函数，我们可以优雅地解决这个问题。
首先，将--progress的值赋给一个计数器showProgress：
.progress-radial {
--progress: 25;
}
.progress-radial b:after {
counter-reset: showProgress var(--progress);
content: counter(showProgress)"%";
}
counter-reset: showProgress var(--progress);将--progress的值赋给了showProgress计数器。content: counter(showProgress)"%";则显示计数器的值并添加百分号，实现了数值到字符串的转换。
同时，var(--progress)仍然可用于角度计算：
.progress-radial:before {
transform: rotate(calc(var(--progress) * 3.6deg)) translate(0, -72.5px);
}
配合HTML结构：
展示进度值：
通过这种方法，我们既能利用CSS变量进行计算，又能将其转换为带百分号的字符串显示，完美解决了进度条显示问题，充分展现了CSS变量和计数器的强大功能。
