動畫進度條文本顯示
[英]Animated progress bar text display
問題描述
（我的網站上的代碼將粘貼在下面）。我剛剛將此代碼從Internet 鏈接中撕了下來，我想知道是否有人可以幫助我一些。 末尾的顯示百分比有一個小的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; }
<head> <script type="text/javascript" src="/templates/progressbar.js"></script> </head> <div id="progressBar" class="pbar"><div></div></div> <script> progressBar(23, $('#progressBar')); </script>
這是背景的GIF
1 個解決方案
解決方案1
5 2015-09-25 12:01:26
您可以使用快捷方式並使用引導進度條。
如果要為其設置動畫。 使用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>
動畫CSS進度欄
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.