从 0 到 100% 为 Bootstrap 进度条设置动画答案

【问题标题】：Animate a Bootstrap progressbar from 0 to 100%从 0 到 100% 为 Bootstrap 进度条设置动画
【发布时间】：2016-03-13 22:45:31
【问题描述】：

我正在使用 Twitter Bootstrap 构建我的网页。

我有这个 HTML 代码：

<div class="btn-group">
    <button type="button" class="btn btn-success">Connect</button>
    <button type="button" class="btn btn-success dropdown-data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#"> Connect 1</a></li>    
        <li role="separator" class="divider"></li>
        <li><a href="#"> Connect 2</a></li>
    </ul>
</div>

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
</div>

<div class="alert alert-success" role="alert">Well done! You successfully connected. <a href="#step2" class="alert-link">Next</a></div>

当用户按下连接按钮或按下下拉按钮（两者之一）时，我想将进度条从 0% 设置为 100%，当进度条达到 100% 时，脚本会显示先前隐藏的警报。

【问题讨论】：

首先，你有没有尝试过什么？其次，既然你要选择任意的时间来从 0 到 100%，那何必呢？只显示某种动画会更合适。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

这就是创建动画进度条所需的全部内容：

var $progressBar = $('.progress-bar').css('width', '80%');

此特定代码会将进度条从当前值设置为 80% 的值。

演示

var $progress = $('.progress');
var $progressBar = $('.progress-bar');
var $alert = $('.alert');

setTimeout(function() {
    $progressBar.css('width', '10%');
    setTimeout(function() {
        $progressBar.css('width', '30%');
        setTimeout(function() {
            $progressBar.css('width', '100%');
            setTimeout(function() {
                $progress.css('display', 'none');
                $alert.css('display', 'block');
            }, 500); // WAIT 5 milliseconds
        }, 2000); // WAIT 2 seconds
    }, 1000); // WAIT 1 seconds
}, 1000); // WAIT 1 second

.progress, .alert {
    margin: 15px;
}

.alert {
    display: none;
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
</div>

<div class="alert alert-success" role="alert">Well done! You successfully connected. <a href="#step2" class="alert-link">Next</a></div>

（另见this Fiddle）

【讨论】：

【解决方案2】：

试试这个代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Progress Bar</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
    margin: 20px;
}
</style>
</head> 
<body>
<div class="bs-example">
    <h2>Task Progress</h2>
    <div class="progress">
        <div class="progress-bar" id="bar">
            <span class="sr-only">60% Complete</span>
        </div>
    </div>
    <script type="text/javascript">
        var i = 0;
        var progressBar = $("#bar");
        function countNumbers(){
            if(i < 100){
                i = i + 1;
                progressBar.css("width", i + "%");
            }
            // Wait for sometime before running this script again
            setTimeout("countNumbers()", 500);
        }
        countNumbers();
    </script>
</div>
</body>
</html>

这个例子来自：

http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-progress-bars.php

http://www.tutorialrepublic.com/html-reference/html5-progress-tag.php

【讨论】：

【解决方案3】：

在 bootstrap v4 中，进度条动画不再默认。您可以在进度条元素中添加 transition-duration 以减慢从 0 到新宽度的过渡。

&lt;div class="progress-bar progress-bar-animated" role="progressbar" style="transition-duration:300ms;"&gt;&lt;/div&gt;

【讨论】：

【解决方案4】：

默认情况下，引导进度条是动画的。当您将进度值设置为新值时，它将导致栏动画化。您只需要设置值：

var bar = $(".progress-bar");
bar.attr("aria-valuenow", newValue);
bar.css("width", newValue + "%");

【讨论】：

【解决方案5】：

我知道这已经够老了。但试试下面的代码，它应该可以帮助您制作多个进度条的动画（如果您碰巧在一个页面中使用多个进度条）。每次添加进度条时，只需添加另一个具有所需宽度的execProg() 及其各自的id

//jQuery for progress bar animating START

function execProg(num, id) {
  /* num --> percentage of width
   * id --> id of progress bar
   */

  var progressBar = $(id);
  for (var i = 0; i < num; i++) {
    progressBar.css("width", i + "%");
  }
}

//The first bar set to 65%
execProg(65, "#barOne");

//The second bar set to 100%
execProg(100, "#barTwo");
//jQuery for progress bar animating END

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="progress" id="setProg">
  <div class="progress-bar align-middle" id="barOne">
    <p>Some Text Here</p>
  </div>
</div>
<div class="m-3"></div>
<div class="progress" id="setProg">
  <div class="progress-bar" id="barTwo">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

【讨论】：