javascript - 看不到进度条标签

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 开发者工具中，它看起来像这样:

但是在栏内看不到标签。所以我很不知道我的问题出在哪里。

标签的 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>