进度栏文字未显示

Question

This meteor client code tries to set a text in the centre of the progress bar but the text is not showing on the screen though it is showing in the inspection panel. Tried on Chrome and Safari for no avail. Any suggestions how to fix this? 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
      }
    }
  });
}());

#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

Use :before pseudo element in CSS to show the text. I Hope this helps you

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

helpful fiddle https://jsfiddle.net/96z0gwv7/1/

Jquery:

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

Css:

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

Answer 2

Progress bars are not supposed to show any text. I'd recommend to add another element ( <div> for example) and show it in place of (or atop of) progress bar.