显示进度条值

Question

我一直在尝试用 html 和 css 制作一个中间有一个值的进度条，但我不知道如何去做。我需要一些帮助将给定值集成到栏中，以便它显示中间的值。

到目前为止我的代码是这样的：

<progress id="file" value="80" max="100"> 80% </progress>

但中间不显示数字。

Answer 1

您可以查看W3Schools自定义进度条。

1. 创建一个外部

   div

   作为进度条的容器
2. 显示“进度”的内部 div

   div

3. 使用javascript更改“进度”

你可以试试这个：

<div style="background-color: grey; text-align:center">
  <div style="width:25%;background-color:green;">25%</div>
</div>

您可以在外部和内部添加更多 CSS

div

，使其更具吸引力

Answer 2

抱歉耽搁了，你可以试试这个

<div class="progress-container">
      <progress style="height: 2rem;" class="progress-da"  value="80" max="100"></progress>
      <span class="progress-value">80%</span>
    </div>

css 与 sass:

.progress-container 
    position: relative

.progress-da 
    width: 100%


.progress-value 
    position: absolute
    top: 8px
    left: 50%
    transform: translateX(-50%)
    font-size: 14px
    color: #000
    font-weight: bold