Javascript 如何创建一个进度条，其中包含已完成进度和已写入的剩余进度的标签？

我想在HTML/CSS中创建类似的内容，对于动态交互，我将使用角度传递宽度。 我知道如何在angular中使用ngStyle动态传递属性。我不知道的部分是纯HTML/CSS

---

请帮帮我。如果需要，在问题描述中建议我必须做的任何更改。

有多种方法：

至少创建两个

项。第一种是100%宽度，文本居中对齐，黑色/白色背景。在此内部，放置另一个

以显示完成百分比/字幕（具有适当的宽度和背景）。外部div包含要显示的文本。您可能需要另一个外部

来充当包装器

你的文字在这里

你可能想看看或者

使用由JS:1更新的

进度[值]：-webkit进度值：：之前{
内容：“80%”；//要更新的内容
位置：绝对位置；
右：0；
前-125%；
}

---

据消息来源称，这可能只适用于WebKit浏览器

---

您可以使用以下样式来获得所需的输出

您必须在以下两个

类中更改
宽度
：

#balance .used,
#balance .used:hover{
  font-weight: bold;
  width: 80%;
}

#balance .used-limit{
  font-weight: bold;
  width: 75%;
}

这是代码


ul{
保证金：0；
填充：0；
列表样式：无；
}
#平衡{
背景：#E1ECF4；
边框宽度：1px；
边框样式：实心；
边框颜色：#E1ECF4#E1ECF4#E1ECF4；
边界半径：5px；
盒影：0.02×rgba（0,0,0,2）；
溢出：隐藏；
宽度：100%；
}
#平衡力{
浮动：左；
}
#平衡{
填充物：7em 1em.7em 2em；
浮动：左；
文字装饰：无；
颜色：#FFF；
位置：相对位置；
文本阴影：0 1px 0 rgba（255255.5）；
背景色：#697193；
背景图像：线性渐变（向右，#697193，#697193）；
}
#李：第一个孩子{
左：1米；
边界半径：5px 0 5px；
}
#平衡a：悬停{
背景：#697193；
}
#平衡a：：之后，
#平衡a：：之前{
内容：“；
位置：绝对位置；
最高：0%；
边框顶部：3.4em实心透明；
边框底部：3.4em实心透明；
左边框：1米实心；
右：-1em；
}
#平衡a：：在{
z指数：2；
左边框颜色：#697193；
}
#平衡a：：之前{
左边框颜色：#697193；
右：-1.0em；
z指数：1；
}
#平衡a：悬停：：之后{
左边框颜色：#697193；
}
#平衡，极限，
#平衡。极限：悬停{
字体大小：粗体；
背景：无；
颜色：#000；
}
#平衡。使用，
#平衡。使用：悬停{
字体大小：粗体；
宽度：80%；
}
#余额.已用限额{
字体大小：粗体；
宽度：75%；
}
#余额。限额：：之后，
#余额。限额：：之前{
内容：正常；
}



这里有一个简单的想法，使用一个元素，您可以使用CSS变量轻松控制进度的宽度

我在没有文字的情况下做了一个例子，以突出重要的部分（见下面有文字的例子）


.box{
宽度：400px；
高度：100px；
保证金：5px；
边界半径：10px；
背景：
线性梯度（红色，红色）左/var（-p，200px）100%，
线性梯度（至左下角，透明49.8%，红色50%）var（-p，200px）0/30px 50%，
线性梯度（至左上角，透明49.8%，红色50%）var（-p，200px）100%/30px 50%，
蓝色
背景重复：无重复；
}

希望这有帮助u@Ibrahimshaikh，你可以查看我的answer@BhavinSolanki是的，你的答案是correct@Ibrahimshaikh谢谢，你们可以检查答案，这是纯css和HTML当你们添加文本时，它是不起作用的well@BhavinSolanki如果你正确地添加文本，它会很好地工作。。这是一个有背景的div，我不认为添加文本会产生任何效果issue@BhavinSolanki不管怎样添加了文本，你都可以在TemaniAfif上检查UpdateAnks