42

いくつかのブートストラッププログレスバーがあるページがあります。それらの値の設定は、最初は正常に機能します。ユーザーがページを開いたときにプログレスバーをアニメーション化/特定の状態に移行させたいのですが。

このJSは、バーの1つをクリックすると正常に機能します。バーの「onload」イベントでは、そのようなものが必要になります。ただし、「onload」イベントはsでは使用できません

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

ページ上のすべてのプログレスバーのページ読み込み時にこの動作を実現するにはどうすればよいですか？

4

5 に答える 5

72

編集

  • v3.1.1でクラス名がから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;
}​

以下のフィドルとで使用されるjQuerydocument.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

于 2012-04-04T08:16:14.403 に答える
27

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>

</ p>

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（）を使用して進行状況を動的に再計算することは、優れた解決策です。;）

編集：

私の友人は、カスタムTwitterブートストラッププログレスバー用の素敵なjqueryプラグインを作成しました。デモは次のとおりです：http： //minddust.github.com/bootstrap-progressbar/

Githubリポジトリは次のとおりです： https ：//github.com/minddust/bootstrap-progressbar

于 2012-04-04T10:32:31.023 に答える
19

BootstrapはCSS3トランジションを使用するため、javascript / jQueryを介して.barの幅を設定すると、プログレスバーが自動的にアニメーション化されます。

http://jsfiddle.net/3j5Je/ ..see？

于 2012-08-10T16:46:38.240 に答える
10

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;
 }
于 2013-07-04T10:21:37.953 に答える
4

これがクロスブラウザの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>

于 2016-10-24T12:29:24.533 に答える