进度条文字不显示

Question

此流星客户端代码尝试在进度条的中心设置一个文本，但该文本未显示在屏幕上，尽管它显示在检查面板中。在 Chrome 和 Safari 上尝试过，但无济于事。 任何建议如何解决这个问题？谢谢

lib = (function () {
  return Object.freeze({
    'clickInfo': function () {
        Meteor.setTimeout(function () {
          let bar = document.getElementById('bar');
          bar.style.visibility = 'visible';
          lib.progressBarStart(bar);
        }, 50);

    },
    'progressBarStart': function (bar) {
      if (bar && bar.value < 70) {
        if (Session.get('inProgress')) {
          setTimeout(function () {
            bar = document.getElementById('bar'); 
            lib.progressBarStart(bar);
          }, 1000);
          bar.value += 1;
        }
      } else if (Session.get('inProgress')) {
        bar.innerHTML = 'Result will be emailed'; // <== text failed to show
      }
    }
  });
}());

#bar {
    width: 100%;
    height: 1.5rem;
    visibility: hidden;
    text-align: center;
    color: white;
    -webkit-appearance: none;
    -moz-appearance: none;
}

<progress id="bar" value="0" max="70"></progress>

Answer 1

在 CSS 中使用 :before 伪元素来显示文本。 希望对你有帮助

progress::before {
  content: 'Result will be emailed';
  position:relative;
  top:5px;
}

有用的小提琴https://jsfiddle.net/96z0gwv7/1/

jquery：

$('#bar').addClass('done');

CSS：

progress.done::before{
  content: 'Result will be emailed';
  position:relative;
  top:5px;
}

Answer 2

进度条不应该显示任何文本。我建议添加另一个元素（例如<div>）并将其显示在进度条的位置（或顶部）。