如何设计带有其值文本的进度条？

Question

如何创建类似这样的进度条？

Answer 1

只需将一个div嵌套在另一个div中，并将嵌套div的宽度设置为进度百分比。您可以将文本与 text-align:center.

对齐

.progress-bar{
  background-color:#EAECEF;
}
.progress-bar .bar{
  background-color:#314EFF;
  color:white;
  text-align:center;
}

<div class="progress-bar">
  <div class="bar" style="width:49%">
    49%
  </div>
</div>

How to design progress bar with text of its value?