JavaScript-bootstrap-JQuery-圆形进度条-设置进度条值

1.bootstrap进度条

Bootstrap进度条使用CSS3过渡和动画来获得该效果。Internet Explorer 9 及之前的版本和旧版的 Firefox 不支持该特性，Opera 12 不支持动画。创建一个基本的进度条的步骤如下：

添加一个带有 class .progress 的<div>。
接着，在上面的<div> 内，添加一个带有 class .progress-bar 的空的 <div>。
添加一个带有百分比表示的宽度的 style 属性，例如 style=“width: 60%”; 表示进度条在 60% 的位置。
让我们看看下面的实例，.sr-only 类可以隐藏文本内容：

<div style="margin-top: 255px;margin-left: 5px;margin-right: 5px;">
    <div class="progress progress-striped active">
        <div id="prog" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:60%;border-radius:0px;">
            <span id="proglabel">60%</span>
        </div>
    </div>
</div>

2.JQuery设置进度条进度值

修改进度条进度值。

var value=100;
$("#prog").css("width", value + "%").text(value + "%");

3.总结

通过设置进度条进度值，可以在界面简单绘制一个进度条。