动画进度条文本显示
[英]Animated progress bar text display
问题描述
(The code that is on my website will be pasted below) I have just ripped this code out of the internet LINK and I was wondering if someone could help me a little bit. 
（我的网站上的代码将粘贴在下面）。我刚刚将此代码从Internet 链接中撕了下来，我想知道是否有人可以帮助我一些。 There is a small x% at the end display the percentage (x being the number). 末尾的显示百分比有一个小的x％（x是数字）。 Is there any way that I could make this appear in the middle of the progress bar, instead of at the end and also change the font of the text? 有什么办法可以使它显示在进度条的中间，而不是在结尾，并且还可以更改文本的字体？ Once it is full that the x% would disappear? x％填满后会消失吗？ I would greatly appreciate it if someone could help me with this. 如果有人可以帮助我，我将不胜感激。
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>
Here is the gif for the background
这是背景的GIF
1 个解决方案
解决方案1
5 2015-09-25 12:01:26
You can use a shortcut and use bootstrap progress bars. 您可以使用快捷方式并使用引导进度条。
If you want to animate it. 如果要为其设置动画。 Use the width property 使用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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.