时间戳

首页 > 解决方案 > 如何设计带有其值文本的进度条？

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

问题描述

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

屏幕

标签： htmlcssmaterialize

解决方案

只需将一个 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>

推荐阅读