Twitter 頁面加載時引導進度條 animation

Question

我有一個包含多個引導程序進度條的頁面。 設置它們的值最初工作正常。 雖然我希望進度條在用戶打開頁面時動畫化/過渡到它們的特定狀態。

當您單擊其中一個欄時，此 JS 工作正常。 在欄的“onload”事件中我需要類似的東西。 但是“onload”事件不適用於 s

//animate progress bars
$('.progress .bar').on("click", function(event) {
  var me = $(this);
  perc = me.attr("data-percentage");
  me.css('width', perc+'%');
});

對於頁面上的所有進度條，如何在頁面加載時實現此行為？

Answer 1

編輯

• Class 在 v3.1.1 中 name 從bar更改為progress-bar

HTML

<div class="container">
    <div class="progress progress-striped active">
        <div class="bar" style="width: 0%;"></div>
    </div>
</div>​

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
    margin-top: 30px;
    width: 400px;
}​

jQuery在下面的小提琴和document.ready中使用。就緒

$(document).ready(function(){

    var progress = setInterval(function() {
        var $bar = $('.bar');

        if ($bar.width()>=400) {
            clearInterval(progress);
            $('.progress').removeClass('active');
        } else {
            $bar.width($bar.width()+40);
        }
        $bar.text($bar.width()/4 + "%");
    }, 800);

});​

演示

JSFiddle

更新的 JSFiddle

Answer 2

雖然 Tats_innit 的回答對它有很好的觸動，但我不得不做一些不同的事情，因為我在頁面上有多個進度條。

這是我的解決方案：

JSfiddle: http://jsfiddle.net/vacNJ/

HTML（示例）：

<div class="progress progress-success">
<div class="bar" style="float: left; width: 0%; " data-percentage="60"></div>
</div>

<div class="progress progress-success">
<div class="bar" style="float: left; width: 0%; " data-percentage="50"></div>
</div>

<div class="progress progress-success">
<div class="bar" style="float: left; width: 0%; " data-percentage="40"></div>
</div>

JavaScript：

setTimeout(function(){

    $('.progress .bar').each(function() {
        var me = $(this);
        var perc = me.attr("data-percentage");

        var current_perc = 0;

        var progress = setInterval(function() {
            if (current_perc>=perc) {
                clearInterval(progress);
            } else {
                current_perc +=1;
                me.css('width', (current_perc)+'%');
            }

            me.text((current_perc)+'%');

        }, 50);

    });

},300);

@Tats_innit：使用 setInterval() 來動態重新計算進度是一個很好的解決方案，thx mate； ;)

編輯：

我的一個朋友為自定義 twitter 引導程序進度條寫了一個不錯的 jquery 插件。 這是一個演示： http://minddust.github.com/bootstrap-progressbar/

這是 Github 回購： https://github.com/minddust/bootstrap-progressbar

Answer 3

Bootstrap 使用 CSS3 過渡，因此當您將 .bar 的寬度設置為 javascript / jQuery 時，進度條會自動設置動畫。

http://jsfiddle.net/3j5Je/ ..看到了嗎？

Answer 4

為 ellabeauty 的回答做出貢獻。 您還可以使用此動態百分比值

$('.bar').css('width',  function(){ return ($(this).attr('data-percentage')+'%')});

並可能為您的 css 添加自定義緩動

.bar {
 -webkit-transition: width 2.50s ease !important;
 -moz-transition: width 2.50s ease !important;
   -o-transition: width 2.50s ease !important;
      transition: width 2.50s ease !important;
 }

Answer 5

這是一個跨瀏覽器的純 CSS 解決方案。 希望能幫助到你！

演示

 .progress.progress-bar { -moz-animation-name: animateBar; -moz-animation-iteration-count: 1; -moz-animation-timing-function: ease-in; -moz-animation-duration: .4s; -webkit-animation-name: animateBar; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease-in; -webkit-animation-duration: .4s; animation-name: animateBar; animation-iteration-count: 1; animation-timing-function: ease-in; animation-duration: .4s; } @-moz-keyframes animateBar { 0% {-moz-transform: translateX(-100%);} 100% {-moz-transform: translateX(0);} } @-webkit-keyframes animateBar { 0% {-webkit-transform: translateX(-100%);} 100% {-webkit-transform: translateX(0);} } @keyframes animateBar { 0% {transform: translateX(-100%);} 100% {transform: translateX(0);} }

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <h3>Progress bar animation on load</h3> <div class="progress"> <div class="progress-bar progress-bar-success" style="width: 75%;"></div> </div> </div>