动画进度条文本显示

（我的网站上的代码将粘贴在下面）我刚从互联网LINK中删除了这段代码，我想知道是否有人可以帮助我一点点。 最后显示一个小的x％百分比（x是数字）。 有什么方法可以让它出现在进度条的中间，而不是在结尾，还可以更改文本的字体？ 一旦它满了，x％就会消失？ 如果有人能帮助我，我将不胜感激。

function progressBar(percent, $element) { var progressBarWidth = percent * $element.width() / 100; $element.find('div').animate({ width: progressBarWidth }, 500).html(percent + "% "); } 

 #progressBar { width: 400px; height: 22px; border: 1px solid #111; background-color: #292929; } #progressBar div { height: 100%; color: #fff; text-align: right; line-height: 22px; width: 0; background-color: #CC6600; } .pbar { background: #FFF; border: 1px solid #AAA; overflow: hidden; } .pbar div { background-image: url(pbar.gif); border-right: 1px solid #AAA; } 

    
  progressBar(23, $('#progressBar'));  

这是背景的GIF

Answer 1

您可以使用快捷方式并使用引导进度条。

如果你想动画它。 使用width属性

 var w = 0; setInterval(function() { w = w % 100 + 10; $('#animate').width(w + '%').text(w + '%') }, 1000); 

 .progress-bar-purple { background-color: purple !important; font-size: 24px !important; line-height: 240px !important; font-family: "Times New Roman" } .progress.tall { min-height: 240px; max-width: 240px; background-color: blue; } .progress-bar-orange { background-color: orange !important; } 

    
 
 40% 
 
 
 
 40% 
 
 
 
 40% 
 
 
 
 40%