动画进度条文本显示
[英]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.