Question

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

function progressBar(percent, $element) {
	var progressBarWidth = percent * $element.width() / 100;
	$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 {
	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

Answer 1

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

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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

动画进度条文本显示

1 个答案: