Как изменить цвет индикатора выполнения загрузки (twitter) во время выполнения

Я использую этот индикатор выполнения:

http://twitter.github.com/bootstrap/components.html#progress

И хотел бы дать ему пользовательский цвет, известный только во время исполнения (так что hardcoding в файле css или less не является вариантом)

Я пробовал это:

<div class="progress">
  <div id='pb' class="bar" style="width: 80%"></div>
</div>

<script>
  $('#pb').css({'background-color': "red"})
</script>

без успеха.

Ответы

Ответ 1

На самом деле ваш код работает, только что индикатор выполнения фактически использует градиент как цвет вместо твердого свойства background-color. Чтобы изменить цвет фона, установите background-image на none, и ваш цвет будет поднят:

$('#pb').css({
    'background-image': 'none',
    'background-color': 'red'
});

Ответ 3

Вы должны изменить класс div контейнера, чтобы изменить цвет.

Пример использования .progress-опасность для красного цвета:

<div class="progress progress-danger">
  <div class="bar" style="width: 60%;"></div>
</div>

Больше цветов (просто замените кнопку для прогресса в имени класса). http://twitter.github.com/bootstrap/base-css.html#buttons

Update: Чтобы добавить имя класса во время выполнения с помощью javascript, посмотрите http://snipplr.com/view/2181/ или http://api.jquery.com/addClass/, если вы используете jQuery.

Надеюсь, что это поможет.

Ответ 4

Вы имеете в виду, как менять цвета друг на друга во время выполнения?

Я могу только представить, что вы делаете, поскольку вы не отметили кого-либо как правильного. В случае, если вы это имеете в виду, посмотрите на этот минимальный jsFiddle

HTML

<div class="progress">
    <div class="bar bar-success" style="width: 0%; opacity: 1;"></div>
</div>

JS

jQuery(document).ready( function(){
    window.percent = 0;
    window.progressInterval = window.setInterval( function(){
        if(window.percent < 100) {
            window.percent++;
            jQuery('.progress').addClass('progress-striped').addClass('active');
            jQuery('.progress .bar:first').removeClass().addClass('bar')
            .addClass ( (percent < 40) ? 'bar-danger' : ( (percent < 80) ? 'bar-warning' : 'bar-success' ) ) ;
            jQuery('.progress .bar:first').width(window.percent+'%');
            jQuery('.progress .bar:first').text(window.percent+'%');
        } else {
            window.clearInterval(window.progressInterval);
            jQuery('.progress').removeClass('progress-striped').removeClass('active');
            jQuery('.progress .bar:first').text('Done!');
        }
    }, 100 );
});

http://jsfiddle.net/LewisCowles1986/U9xw6/