progressbar labels can not be seen
<p>I have to fix a progressbar at work. Since I am quite new to coding I have one big problem. I am not able to display a message within the center of the progressbar.</p>

<p>This is the code for the progressbar:</p>

<pre><code>progress: {
        show: function (msg) {
            notify.hideAll();
            var progress = $("&lt;progress&gt;");
            progress.attr("max", "100");
            progress.attr("value", "0");
            progress.attr("showText", "true");
            $(progress).append('&lt;div id="progressLabel"&gt;&lt;/div&gt;');
            $(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;
        }
</code></pre>

<p>And this is a function to test the bar</p>

<pre><code>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);
</code></pre>

<p>In the Google-Developer-Tools it looks like this:</p>

<p><a href="https://i.stack.imgur.com/cc4fD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cc4fD.png" alt="enter image description here"></a></p>

<p>But the label can not be seen within the bar. So i am quite clueless where my problem is.</p>

<p>The CSS of the label is simple:</p>

<pre><code>#progressLabel{
            text-align: center;
            line-height: 30px;
            color: white;             
        }
</code></pre>

<p>So if anyone could help me I would highly appreciate it!</p>