Текст JQuery Progressbar скрывает анимацию Progressbar

Question

Я смотрел исходный код Промежуточного окна JQuery: https://jqueryui.com/progressbar/#label. Я заметил, что они объявляют positionprogress-labelabsolute. Это не кажется оптимальным, потому что тогда вам нужно жестко закодировать магическое число, чтобы сосредоточить его на progressbar. Они просто говорят left: 50%, но это не так, как вы можете видеть здесь: https://jsfiddle.net/zdfu5r9z/8 (код получен непосредственно из предыдущей ссылки). Однако, когда я попытался использовать position: relative; text-align: center;, текст теперь центрирован, но он скрывает анимацию progressbar, как показано здесь http://jsfiddle.net/zdfu5r9z/5/. Любая помощь будет очень признательна за то, как я могу сосредоточить текст и работать с анимацией. Благодаря!

Answer 1

Вы можете сделать что-то вроде этого:

$(function() { 
 
    var progressbar = $("#progressbar"), 
 
    progressLabel = $(".progress-label"); 
 
    
 
    progressbar.progressbar({ 
 
     value: false, 
 
     change: function() { 
 
      progressLabel.text(progressbar.progressbar("value") + "%"); 
 
     }, 
 
     complete: function() { 
 
      progressLabel.text("Complete!"); 
 
     } 
 
    }); 
 

 
    function progress() { 
 
     var val = progressbar.progressbar("value") || 0; 
 
     
 
     progressbar.progressbar("value", val + 2); 
 
     
 
     if (val < 99) { 
 
      setTimeout(progress, 80); 
 
     } 
 
    } 
 
    setTimeout(progress, 2000); 
 
});

.ui-progressbar { 
 
    position: relative; 
 
} 
 

 
.progress-label { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    font-weight: bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 
<div id="progressbar"><div class="progress-label">Loading...</div></div>