动画进度条文本显示

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

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

#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 { 
 
\t background: #FFF; 
 
\t border: 1px solid #AAA; 
 
\t overflow: hidden; \t \t 
 
} 
 
.pbar div { 
 
\t background-image: url(pbar.gif); 
 
\t border-right: 1px solid #AAA; 
 
}

<head> 
 
    <script type="text/javascript" src="/templates/progressbar.js"></script> 
 
</head> 
 
<div id="progressBar" class="pbar"><div></div></div> 
 
<script> 
 
\t progressBar(23, $('#progressBar')); 
 
</script>

这里是背景

来源

2015-09-25 Lion

更改文本对齐：权利;在#progressBar div to text-align：center;并更改该元素的CSS来包含您的字体首选项 – DRGA

@DRGA谢谢，我以前实际尝试过这个字体家族，但似乎没有工作。我错过了第一次对齐的文本，但这次它确实奏效（他们俩），谢谢！不知道为什么字体家族第一次无法正常工作，但是现在它很好用。 – Lion

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

如果你想动画它。使用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; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="progress"> 
 
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%"> 
 
    40% 
 
    </div> 
 
</div> 
 
<div class="progress"> 
 
    <div id='animate' class="progress-bar progress-bar-striped active" style="width:40%"> 
 
    40% 
 
    </div> 
 
</div> 
 
<div class="progress"> 
 
    <div id='animate' class="progress-bar progress-bar-striped progress-bar-orange active" style="width:40%"> 
 
    40% 
 
    </div> 
 
</div> 
 
<div class="progress tall"> 
 
    <div id='animate' class="progress-bar progress-bar-striped progress-bar-purple active" style="width:40%"> 
 
    40% 
 
    </div> 
 
</div>

来源

2015-09-25 12:01:26 Neoaptt

这看起来不错，但我如何使用我自己的css来定制它们？宽度，高度，背景颜色，栏颜色，字体，字体颜色等？ – Lion

编辑自定义栏的答案 – Neoaptt

动画进度条文本显示

回答

相关问题