11

ブートストラップを使用して Web サイトを作成しており、プログレス バーを使用しようとしています。私がやろうとしているのは、PHP で関数を完了した後 (実行する関数が 10 個あります)、バーの進行を 10% 進めることです。彼はJavaスクリプトを使用して行われたと思いますが、ブートストラップでそれを行う方法がわかりません。現在のWeb検索では、使用できるものは何も見つかりませんでした. (ページの読み込みが 100% まで進行する例はありますが、これらがどのように機能するかはわかりません)

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

上記は、ブートストラップ プログレス バーの HTML 定義です。幅を変更すると塗りつぶされる割合が変わることは知っていますが、関数を完了した後に変更する方法がわかりません (関数はすべて 1 つのページで次々に実行されます)。

誰か助けてくれませんか？または私を正しい方向に向けますか？

4

3 に答える 3

8

次のように進行状況バーの幅を変更できます。

$('.progress-bar').css('width', percentageCompleted + '%');

percentageCompletedの値が変わるたびに、その値が 100 になるまでこれを繰り返します。

デモ

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">Loading completed!</div>

（この Fiddleも参照）

于 2016-03-14T12:52:40.537 に答える
5

プログレス バーのアニメーションを 1 ステップで作成する必要がある場合は、2 行のコードを作成できます。

$progressBar.animate({width: "100%"}, 100);
$progress.delay(1000).fadeOut(500);

デモを参照してください https://jsfiddle.net/qLgv2Lfm/29/

于 2016-07-15T07:36:16.170 に答える
4

JQueryを使用することを好む

$(".bar").css("width", "50%");

またはJavascriptで

var bars = document.getElementsByClassName("bar");
bars[0].style.width = "50%";
于 2013-08-30T10:47:30.027 に答える