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

Question

Я использую этот прогресс бар:

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

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

Я попытался это:

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

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

без успеха.

Answer 1

Вы должны изменить класс 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.

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

Answer 2

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

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

Answer 3

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

Я могу только представить, что вы делаете, поскольку вы не отметили никого как правильного. В случае, если Вы имеете в виду это, то есть смотреть на это очень минимальный 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/

Answer 4

Существует в настоящее время начальной загрузки бар 3,2 прогресса дизайнер инструмент.

http://bootstrapdesigntools.com/tools/bootstrap-progress-bar-designer/