Question

我正在使用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％时，脚本会显示之前隐藏的警报。

Answer 1

试试这段代码：

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

Answer 2

默认情况下，引导程序进度条是动画的。将进度值设置为新值时，将使该栏设置动画。您只需设置值：

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

Answer 3

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

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）

Answer 4

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

<div class="progress-bar progress-bar-animated" role="progressbar" style="transition-duration:300ms;"></div>

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

将Bootstrap进度条设置为0到100％的动画

5 个答案:

演示