プログレスバーのラベルが表示されない

Question

作業中にプログレスバーを修正する必要があります。私はコーディングに新しいので、大きな問題が1つあります。私はプログレスバーの中央にメッセージを表示できません。

これは、プログレスバーのコードです：

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); 

テストするための機能です：

を

ただし、ラベルはバー内には表示されません。だから私は私の問題がどこにあるのかわからない。

ラベルの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>