Hoạt ảnh thanh tiến trình khởi động Twitter trên trang tải

Question

Tôi có một trang có nhiều thanh tiến trình khởi động. Đặt giá trị ban đầu của chúng hoạt động tốt. Mặc dù tôi muốn các thanh tiến trình chuyển sang trạng thái animate/transition sang trạng thái cụ thể khi người dùng mở trang.

JS này hoạt động tốt, khi bạn nhấp vào một trong các thanh. Tôi sẽ cần một cái gì đó như thế trên một sự kiện "onload" của thanh. Nhưng sự kiện "onload" không có sẵn cho s

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

Làm cách nào để đạt được hành vi này khi tải trang cho tất cả thanh tiến trình trên một trang?

Answer 1

Trong khi câu trả lời của Tats_innit có một liên lạc tốt đẹp với nó, tôi đã phải làm điều đó một chút khác nhau vì tôi có nhiều hơn một thanh tiến trình trên trang.

đây là giải pháp của tôi:

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

HTML (ví dụ):

<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: Sử dụng setInterval() để tự động tính toán lại tiến độ là một giải pháp tốt đẹp, thx mate! ;)

EDIT:

Một người bạn của tôi đã viết một plugin jquery đẹp cho twitter tùy chỉnh bootstrap tiến quán bar. Dưới đây là một bản demo: http://minddust.github.com/bootstrap-progressbar/

Đây là repo Github: https://github.com/minddust/bootstrap-progressbar

Answer 2

EDIT

• tên lớp thay đổi bar-progress-bar trong v3.1.1

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 sử dụng trong fiddle dưới đây và trên 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); 

});​ 

Demo

JSFiddle

Updated JSFiddle

Answer 3

Bootstrap sử dụng hiệu ứng chuyển tiếp CSS3 để tiến thanh sẽ tự động hoạt hình khi bạn thiết lập độ rộng của .bar máng javascript/jQuery.

http://jsfiddle.net/3j5Je/ ..xem?

Answer 4

Đóng góp vào câu trả lời của ellabeauty. bạn cũng có thể sử dụng tỷ lệ động này đánh giá cao

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

Và có lẽ thêm tùy chỉnh nới lỏng để css của bạn

.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

Dưới đây là một giải pháp CSS-chỉ qua trình duyệt. Hy vọng nó giúp!

DEMO

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