Fortschrittsbalken können nicht gesehen werden

Question

Ich muss einen Fortschrittsbalken bei der Arbeit beheben. Da ich ziemlich neu im Codieren bin, habe ich ein großes Problem. Ich kann keine Nachricht in der Mitte der Fortschrittsleiste anzeigen.

Dies ist der Code für die 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; 
     } 

Und dies ist eine Funktion der Bar

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

In den Google-Entwickler-Tool testen Sie es wie folgt aussieht:

Aber das Etikett kann nicht innerhalb der Bar gesehen werden. Ich bin also ziemlich ahnungslos, wo mein Problem ist.

Die CSS des Labels ist einfach:

#progressLabel{ 
      text-align: center; 
      line-height: 30px; 
      color: white;    
     } 

Also, wenn mir jemand helfen könnte ich es sehr schätzen würde!

Answer 1

Anstatt das Etikett innerhalb der <progress> zu setzen, legen Sie es außerhalb wo .progress-text ist der Aktualisierungswert.

<label> 
    <progress value="50" max="100"></progress>Wird geladen... 
    <span class="progress-text">50%</span> 
</label>