无法看到进度条标签

Question

我必须在工作中修复进度条。由于我对编码很新，我有一个大问题。我无法在进度条的中心显示消息。

这是进度条的代码：

progress: {
        show: function (msg) {
            notify.hideAll();
            var progress = $("<progress>");
            progress.attr("max", "100");
            progress.attr("value", "0");
            progress.attr("showText", "true");
            $(progress).append('<div id="progressLabel"></div>');
            $(sel(params.classNotifyBottomSmall)).find(sel(params.classNotifyButton)).hide();
            $(sel(params.classNotifyBottomSmall)).find(sel(params.classNotifyMsg)).html(progress);
            $(sel(params.classNotifyBottomSmall)).find(sel(params.classNotifyIcon)).hide();
            notify.glass.show();
            $(sel(params.classNotifyBottomSmall)).show();
            return progress;
        }

这是测试栏的功能

setTimeout(function() {
        var progress = brmgui.notify.progress.show("Testfortschritt!");
        var pValue = 0;
        setInterval(function() {
            $(progress).attr("value", pValue);
            pValue++;
            $("#progressLabel").html("Wird geladen... " + (pValue-1) + "%");          
        }, 1000);
    }, 3000);

在Google-Developer-Tools中，它看起来像这样：

但是在酒吧内看不到标签。所以我的问题在哪里，我很无能为力。

标签的CSS很简单：

#progressLabel{
            text-align: center;
            line-height: 30px;
            color: white;             
        }

所以如果有人能帮助我，我会非常感激！

Answer 1

不要将标签放在<progress>内，而是将其放在.progress-text为更新值的位置。

<label>
  <progress value="50" max="100"></progress>Wird geladen...
  <span class="progress-text">50%</span>
</label>