写在前面:
bootstrap进度条的样式还是很好看的,直接拿demo来用就可以。
下面看个简单的例子的代码吧
<div id="myProgress" class="progress" style=" 500px"> <div id="probar" class="progress-bar progress-bar-grey" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style=" 10%;"> </div> </div>
效果图显示:
由于bootstrap进度条控制其进度是靠width的,故我们只需要动态改变它的width就可以了。如果使用jquery来改变则通过改变css的属性就可以了
$("#probar").css("width","60%")
如果要想在进度条上显示数字,则设置宽度的同时,并设置下text就可以了
$("#probar").css("width","60%").text("60%");
通过点击按钮,改变进度条的进度并显示文字的效果的效果图