Прогресс-бар Bootstrap

Я использую bootstrap для создания своего веб-сайта, и я пытаюсь использовать индикатор выполнения. То, что я пытаюсь сделать, это после завершения функции в PHP (у меня есть 10 функций), я продвигаю прогресс бара на 10%. Я считаю, что он сделан с помощью java-скрипта, но я не уверен, как это сделать с bootstrap, и мои текущие веб-поиски не нашли ничего, что я мог бы использовать. (есть примеры, когда страница загружает прогресс до 100%, но я не знаю, как это работа)

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

Это выше мое HTML-определение индикатора выполнения начальной загрузки. Я знаю, что изменение ширины изменяет процент того, что заполнено, но я не знаю, как изменить его после завершения функции (все функции на одной странице запускаются один за другим).

может кто поможет? или указать мне правильное направление?

9
html javascript jquery progress-bar twitter-bootstrap

3 ответов

предпочитаю использовать в jQuery

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

или в Javascript

var bars = document.getElementsByClassName("bar");
bars[0].style.width = "50%";
4

вы можете изменить ширину индикатора выполнения следующим образом:

$('.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>

(см. Также эта скрипка)

6

Если вам нужно сделать анимацию progress barr за один шаг, вы можете сделать две строки кода:

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

смотрите демо https://jsfiddle.net/qLgv2Lfm/29/

4