Javascript 进度条文本不显示

此meteor客户端代码尝试在进度条的中心设置一个文本，但该文本不会显示在屏幕上，尽管它显示在检查面板中。在Chrome和Safari上试过都没有用。 有什么建议可以解决这个问题吗？thx

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
      }
    }
  });
}());

---

使用CSS中的

：在

伪元素之前显示文本。 我希望这对你有帮助

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

有用的小提琴

Jquery：

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

Css:

---

进度条不应显示任何文本。我建议添加另一个元素（例如，

），并将其显示在进度条的位置（或顶部）。

然后

$（'#bar'）。addClass（'progress:before'）

而不是

bar.innerHTML='结果将通过电子邮件发送'工作不正常。正如您在我的JS代码中所注意到的。它只需要在某个特定的时间显示。我应用了所述的编辑，但仍然没有修复。不知道为什么。检查此链接中的答案希望这能给你一个想法你能给JS代码一个
p
元素放在条的顶部，文本在中间吗？还是像你建议的那样？帮我修好了。
progress.done::before{
  content: 'Result will be emailed';
  position:relative;
  top:5px;
}