如何设计带有其值文本的进度条？ [关闭]

【问题标题】：How to design progress bar with text of its value? [closed]如何设计带有其值文本的进度条？ [关闭]
【发布时间】：2021-07-01 23:28:21
【问题描述】：

我怎样才能创建这样的进度条？

【问题讨论】：

【解决方案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>

【讨论】：