Javascript 多次重复使用CSS类

我有一个基本的网页，我试图通过使用CSS显示一个后台任务的进度/完成状态

此外，我有多个这样的后台任务，我想通过使用气泡进度条的另一个副本，在同一个html网页中显示每个任务的进度。 假设我想有5个这样的气泡，每个气泡显示5个独立任务的进度，我想我必须复制粘贴1个气泡的CSS，并将名称从x更改为y 5次，并相应地使用5个新名称。这不是正确的做法

有没有一种方法可以让我使用javascript或其他简单的方法，用一个新名称复制它T次

请允许我获得一些帮助，以生成正确的javascript代码和正确的函数调用来实现这一点。提前感谢你

下面是源代码中的CSS代码

@导入“nib”
@关键帧旋转
从…起
变换旋转（0度）
到
变换旋转（360度）
占位符（）
：-webkit输入占位符
{block}
：-moz占位符
{block}
：-moz占位符
{block}
：-ms输入占位符
{block}
text-glow（）
文本阴影0 0个参数
box-glow（）
框阴影0 0个参数
//页面
页面字体=无衬线
页面背景颜色=变暗（白色，90%）
进度气泡（$color，$amount）
//进度条
进度原色=$color
进度大小=250px
进度边框大小=5px
进度内边框大小=5px
进度内部大小=进度大小-（进度边框大小+进度内部边框大小）
进度内边框=进度内边框大小实心页面背景色
进度α=50%
进度级别更改速度=1s
进程旋转速度=10秒
进度百分比颜色=变暗（进度原色，40%）
进度百分比发光=10px变暗（进度百分比颜色，25%）
进度框发光=20px变暗（进度百分比颜色，25%）
进度液体辉光=20px变暗（进度百分比颜色，5%）
进度眩光背景=rgba（255、255、255、0.15）
进度水平=（100%-$amount）
.进展
+缓存（“.progress”）
相对位置
边界半径50%
+缓存（'.progress'+进度大小）
宽度进度大小
高度进度大小
+缓存（“.progress”+进度边框大小+”“+进度主颜色）
边框进度边框大小实体进度主颜色
+缓存（“.progress”+进度框发光）
长方体发光进度长方体发光
+缓存（“.progress”+进度级别更改速度）
过渡所有进度级别更改速度减缓
内部的
+缓存（'.progress.inner'）
绝对位置
溢出隐藏
z指数2
边界半径50%
+缓存（'.progress.inner'+进度内部大小）
宽度进度内部尺寸
高度进度内部尺寸
+缓存（'.progress.inner'+进度内边框）
边界进展内部边界
+缓存（'.progress.internal'+进度级别更改速度）
过渡所有进度级别更改速度减缓
.水
+缓存（'.progress.internal.water'）
绝对位置
z指数1
宽度200%
高度200%
左-50%
边界半径40%
动画迭代次数无限
动画定时函数线性
动画名称旋转
+缓存（'.progress.internal.water'+进度级别）
最高进展水平
+缓存（'.progress.internal.water'+进度原色+“”+进度alph）
背景alpha（进度原色、进度alpha）
+缓存（'.progress.internal.water'+进度级别更改速度）
过渡所有进度级别更改速度减缓
+缓存（'.progress.internal.water'+进度旋转速度）
动画持续时间进度旋转速度
+缓存（'.progress.internal.water'+progress-liquid-glow）
箱辉光进展液体辉光
.眩光
+缓存（'.progress.internal.glare'）
绝对位置
前-120%
左-120%
z指数5
宽度200%
高度200%
变换旋转（45度）
边界半径50%
+缓存（'.progress.internal.glare'+progress glare background）
背景色进度眩光背景
+缓存（'.progress.internal.glare'+进度级别更改速度）
过渡所有进度级别更改速度减缓
百分比
+缓存（'.progress.internal.percent'）
绝对位置
前0名
左0
宽度100%
高度100%
字体粗体
文本居中对齐
+缓存（'.progress.inner.percent'+进度内部大小）
行高进程内部大小
字体大小（进度内部大小/2.6px）
+缓存（'.progress.internal.percent'+进度百分比颜色）
颜色进度百分比颜色
+缓存（'.progress.internal.percent'+进度百分比）
文本发光进度百分比发光
+缓存（'.progress.internal.percent'+进度级别更改速度）
过渡所有进度级别更改速度减缓
*
框尺寸边框框
html，正文
高度100%
身体
背景色页面背景色
字体系列页面字体
字体大小15px
颜色变深（白色，20%）
输入[type=“text”]
背景色透明
利润最高30px
边界0
边框底部实心1px加亮（蓝色，50%）
文本居中对齐
字体大小20px
颜色变浅（rgb（50、118、237）、15%）
文本辉光3倍变亮（rgb（50、118、237）、15%）
宽度45px
显示内联块
输入：焦点
大纲0
边框底部虚线1px变亮（红色，50%）
输入：：选择
彩色页面背景色
背景色变亮（浅蓝色，30%）
+占位符（）
颜色