看不到进度条标签

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>