如何在HTML5进度条中显示数据标签？（跨浏览器）

Question

我有一个样式化的HTML5进度条，我希望能够在不同浏览器中显示数据标签在进度条内部而不是当前显示在进度条上方。

HTML:

<progress max="100" value="50" data-label="50% Complete"></progress>

CSS：

progress {
  text-align:center;
  height: 1.5em;
  width: 100%;
  -webkit-appearance: none;
  border: none;
}
progress:before {
  content: attr(data-label);
  font-size: 0.8em;
  vertical-align: 0
}
progress::-webkit-progress-bar {
  background-color: #c9c9c9;
}
progress::-webkit-progress-value,
progress::-moz-progress-bar {
  background-color: #7cc4ff;
}

我得到了下面的结果，但我想把数据标签放在进度条内部：

- user6655274

---

顺便说一下，我正在使用Firefox 49.0.2，但进度条标签没有显示出来。如果你想要跨浏览器兼容性，我建议你制作经典的HTML进度条，或者至少打印进度。 - Troyer

Answer 1

简而言之：不要在<progress>元素上使用伪元素。

正如其他答案和我的评论所说，HTML/CSS进度条比使用<progress>元素更好。

基于Gecko的浏览器（如Firefox）根本不会显示伪元素。

但是，为了回答您的问题，只需将文本放置在进度条上方即可：

progress {
  text-align: center;
  height: 1.5em;
  width: 100%;
  -webkit-appearance: none;
  border: none;
  
  /* Set the progressbar to relative */
  position:relative;
}
progress:before {
  content: attr(data-label);
  font-size: 0.8em;
  vertical-align: 0;
  
  /*Position text over the progress bar */
  position:absolute;
  left:0;
  right:0;
}
progress::-webkit-progress-bar {
  background-color: #c9c9c9;
}
progress::-webkit-progress-value {
  background-color: #7cc4ff;
}
progress::-moz-progress-bar {
  background-color: #7cc4ff;
}

<progress max="100" value="50" data-label="50% Complete"></progress>

请注意，这并不具有良好的浏览器支持（事实上，它相当糟糕），因为<progress>是一个替换元素，就像<input>一样。

CSS规范并没有完全明确替换元素是否可以有伪元素，因此不同的浏览器呈现方式也不同。基于Webkit的浏览器（如Chrome）有时会显示它们，而基于Gecko的浏览器（如Firefox）则不会。

请参见这个答案中的类似问题。

因此，如果这是用于网站而不是electron应用程序或类似应用程序，我强烈建议使用HTML/CSS进度条。

.progress {
  height: 1.5em;
  width: 100%;
  background-color: #c9c9c9;
  position: relative;
}
.progress:before {
  content: attr(data-label);
  font-size: 0.8em;
  position: absolute;
  text-align: center;
  top: 5px;
  left: 0;
  right: 0;
}
.progress .value {
  background-color: #7cc4ff;
  display: inline-block;
  height: 100%;
}

<div class="progress" data-label="50% Complete">
  <span class="value" style="width:50%;"></span>
</div>

注意：即使是基于 Webkit 的浏览器应用程序，您仍不应在 <progress> 上使用伪元素。如上所述，此功能的规格不明确，可能会在将来更改，破坏您的进度元素。Webkit 也可能停止支持此功能。

我建议只使用 HTML/CSS 进度条，这样您将来可以省去很多麻烦。

- Jacob G

---

哦，我明白了，那么我不明白为什么人们现在会使用它，至少我会等到它与大多数浏览器版本兼容。 - Troyer

@Troyer 可能大多数浏览器永远不会兼容它，因为它不是规范的一部分。 Webkit 只是显示它们，但考虑到它不支持 textarea 或类似的对象，我认为未来 Webkit 对此的支持可能会被放弃。 - Jacob G

Answer 2

你所需要做的就是将状态文本的 z-index 设置为 1（-1 无效，0 是默认值），然后在状态文本元素上设置负的 margin-top: -32px（对于 height: 32px），这样就可以保留 progress 元素而不添加任何多余的内容：

<div style="z-index: 2;"><span>Staging item 144 of 271...</span></div>
<div style="margin-top: -32px;"><progress max="100" value="44">44%</progress></div>

- John

Answer 3

显然，我需要制作一个带有居中文本的CSS HTML进度条，并找到了这个答案，但是这里的答案没有居中文本。下面是带有居中文本的HTML、CSS进度条。

#progress_container {
  width: 100px;
  background-color: rgb(161, 161, 161);;
  height: 30px;
  position: relative;
}

#progress_container_text {
  position: absolute;
  left: 0;
  right: 0;
  height: 100%;
}

#progress_container_text_align_center {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}

#loading_bar {
  width: 30%;
  height: 100%;
  background-color: rgb(58, 166, 255);
}

<div id="progress_container">
  <div id="progress_container_text">
    <div id="progress_container_text_align_center">30%</div>
  </div>
  <div id="loading_bar"></div>
</div>

- Sergey Anisimov