ярлыки progressbar не отображаются

Question

Я должен исправить прогресс на работе. Поскольку я совершенно новичок в кодировании, у меня есть одна большая проблема. Я не могу отображать сообщение в центре панели прогресса.

Это код ProgressBar:

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>