如何创建带有进度条的进度条，其中包含完成进度和剩余进度的标签？

Question

我想在 HTML / CSS 中创建类似的内容，并且为了进行动态交互，我将使用Angular传递宽度。 我知道如何在AngStyle中通过ngStyle动态传递属性。我一无所知的部分是完全是HTML / CSS 。
请帮帮我。如果需要，建议我在问题描述中必须做的任何更改。

Answer 1

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

我制作的示例中没有文字以突出显示重要部分（请参见下面的文字示例）

.box {
  width:400px;
  height:100px;
  margin:5px;
  border-radius:10px;
  background:
    linear-gradient(red,red) left/var(--p,200px) 100%,
    linear-gradient(to bottom left,transparent 49.8%,red 50%) var(--p,200px) 0/ 30px 50%,
    linear-gradient(to top left,transparent 49.8%,red 50%) var(--p,200px) 100%/ 30px 50%,
    blue;
    
  background-repeat:no-repeat;
}

<div class="box">
</div>
<div class="box" style="--p:100px">
</div>
<div class="box" style="--p:300px">
</div>

文字示例：

.box {
  width:400px;
  height:100px;
  margin:5px;
  border-radius:10px;
  background:
    linear-gradient(red,red) left/var(--p,200px) 100%,
    linear-gradient(to bottom left,transparent 49.8%,red 50%) var(--p,200px) 0/ 30px 50%,
    linear-gradient(to top left,transparent 49.8%,red 50%) var(--p,200px) 100%/ 30px 50%,
    blue;
    
  background-repeat:no-repeat;
  
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:1.3em;
  color:#fff;
}
p {
 padding:0 10px;
 text-align:right;
}

<div class="box">
<p>Used<br> 200.00</p>
<p>Cash limit<br> 2000.00</p>
</div>
<div class="box" style="--p:100px">
<p>Used<br> 200.00</p>
<p>Cash limit<br> 2000.00</p>
</div>
<div class="box" style="--p:280px">
<p>Used<br> 200.00</p>
<p>Cash limit<br> 2000.00</p>
</div>

Answer 2

有多种方法：

1. 至少创建两个<div>项目。第一个将是100％宽度，文本居中，黑色/白色背景。在其中放置另一个<div>，以显示完成/选取框的百分比（具有适当的宽度和背景）。外部div包含要显示的文本。您可能需要另一个外部<div>来充当包装器。

<div id="MyProgress" class="progressbar"> <div class="progress-inner">Your text here</div> </div>

1. 您可能想看看how Bootstrap does its progress bars或

2. 使用JS更新的HTML5 <progress> element with CSS： ¹

progress[value]::-webkit-progress-value::before { content: '80%'; // What you want to update position: absolute; right: 0; top: -125%; }

---

1. 根据消息来源，这可能仅适用于WebKit浏览器

Answer 3

您可以使用以下样式获取所需的输出。

您必须在以下两个width中更改class：

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

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

这是代码

ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
#balance{
  background: #E1ECF4;
  border-width: 1px;
  border-style: solid;
  border-color: #E1ECF4 #E1ECF4 #E1ECF4;
  border-radius: 5px;
  box-shadow: 0 0 2px rgba(0,0,0,.2);
  overflow: hidden;
  width: 100%;
}

#balance li{
  float: left;
}

#balance a{
  padding: .7em 1em .7em 2em;
  float: left;
  text-decoration: none;
  color: #FFF;
  position: relative;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  background-color: #697193;
  background-image: linear-gradient(to right, #697193, #697193);  
}

#balance li:first-child a{
  padding-left: 1em;
  border-radius: 5px 0 0 5px;
}

#balance a:hover{
  background: #697193;
}

#balance a::after,
#balance a::before{
  content: "";
  position: absolute;
  top: 0%;
  border-top: 3.4em solid transparent;
  border-bottom: 3.4em solid transparent;
  border-left: 1em solid;
  right: -1em;
}

#balance a::after{ 
  z-index: 2;
  border-left-color: #697193;  
}

#balance a::before{
  border-left-color: #697193;  
  right: -1.0em;
  z-index: 1; 
}

#balance a:hover::after{
  border-left-color: #697193;
}

#balance .limit,
#balance .limit:hover{
  font-weight: bold;
  background: none;
  color :#000;
}

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

#balance .used-limit{
  font-weight: bold;
  width: 75%;
}
#balance .limit::after,
#balance .limit::before{
  content: normal;  
}

<ul id="balance">
    <li class="used-limit"><a href="" class="used"><p>Used</p><p>250.00</p></a></li>
    <li><a href="" class="limit"><p>Cash Limit</p><p>300.00</p></a></li>
</ul>