How to Change the Color of a Bootstrap (Twitter) Progress Bar at Runtime

Dynamically change the color of progress bar by javascript for Twitter Bootstrap

Here's a strictly vanilla.js solution: http://jsfiddle.net/pZ5mG/2/

HTML

<div class="progress">
    <div id="myProgress" class="bar bar-danger"></div>
</div>​

JS

var bar = document.getElementById("myProgress");
var progress = 0;

function setProgress(percent){
    bar.style.width = percent + "%";

    if (percent > 90)
        bar.className = "bar bar-success";
    else if (percent > 50)
        bar.className = "bar bar-warning";
}

var interval = setInterval(
    function(){
        setProgress(++progress);
        if (progress == 100) window.clearInterval(interval);
    }, 100);

Is this about what you are wanting to accomplish? (Obviously you wouldn't be using an Interval to update the progress)

How can I change color of bootstrap progress bar with custom color

Using Bootstrap 3.2.0, you can do something like the following:

$(function() {    $("#one").addClass("progress-bar-purple");   $("#two").addClass("progress-bar-orange");});

.progress-bar-purple {      background-color: purple !important;}.progress-bar-orange {      background-color: orange !important;}

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script><link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><br/><div class="progress">  <div id="one" class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">    60%  </div></div><div class="progress">  <div id="two" class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">    80%  </div></div>

How to make bootstrap progress bar text independent to the colored part?

You can do it like this

var progressBarText = $('.progress-bar').html();
$('.progress-bar').html('');
$('.progress').append('<div class="progress-bar-text">' + progressBarText + '</div>');

.progress {  position: relative;}
.progress-bar-text {  position: absolute;  width: 100%;  text-align: center;}

<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">  <h2>Progress Bar With Label</h2>  <div class="progress">    <div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width:30%">      30%    </div>  </div></div>

Dynamically change bootstrap progress bar value when checkboxes checked

Try this maybe :

Bootply : http://www.bootply.com/106527

Js :

$('input').on('click', function(){
  var valeur = 0;
  $('input:checked').each(function(){
       if ( $(this).attr('value') > valeur )
       {
           valeur =  $(this).attr('value');
       }
  });
  $('.progress-bar').css('width', valeur+'%').attr('aria-valuenow', valeur);    
});

HTML :

 <div class="progress progress-striped active">
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
        </div>
    </div>
<div class="row tasks">
        <div class="col-md-6">
          <p><span>Identify your campaign audience.</span>Who are we talking to here? Understand your buyer persona before launching into a campaign, so you can target them correctly.</p>
        </div>
        <div class="col-md-2">
          <label>2014-01-29</label>
        </div>
        <div class="col-md-2">
          <input name="progress" class="progress" type="checkbox" value="10">
        </div>
        <div class="col-md-2">
          <input name="done" class="done" type="checkbox" value="20">
        </div>
      </div><!-- tasks -->

<div class="row tasks">
        <div class="col-md-6">
          <p><span>Set your goals + benchmarks</span>Having SMART goals can help you be
sure that you’ll have tangible results to share with the world (or your
boss) at the end of your campaign.</p>
        </div>
        <div class="col-md-2">
          <label>2014-01-25</label>
        </div>
        <div class="col-md-2">
          <input name="progress" class="progress" type="checkbox" value="30">
        </div>
        <div class="col-md-2">
          <input name="done" class="done" type="checkbox" value="40">
        </div>
      </div><!-- tasks -->

Css

.tasks{
    background-color: #F6F8F8;
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
}
.tasks span{
    font-weight: bold;
}
.tasks input{
    display: block;
    margin: 0 auto;
    margin-top: 10px;
}
.tasks a{
    color: #000;
    text-decoration: none;
    border:none;
}
.tasks a:hover{
    border-bottom: dashed 1px #0088cc;
}
.tasks label{
    display: block;
    text-align: center;
}

$(function(){$('input').on('click', function(){  var valeur = 0;  $('input:checked').each(function(){       if ( $(this).attr('value') > valeur )       {           valeur =  $(this).attr('value');       }  });  $('.progress-bar').css('width', valeur+'%').attr('aria-valuenow', valeur);    });
});

.tasks{ background-color: #F6F8F8; padding: 10px; border-radius: 5px; margin-top: 10px;}.tasks span{ font-weight: bold;}.tasks input{ display: block; margin: 0 auto; margin-top: 10px;}.tasks a{ color: #000; text-decoration: none; border:none;}.tasks a:hover{ border-bottom: dashed 1px #0088cc;}.tasks label{ display: block; text-align: center;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="progress progress-striped active">        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">        </div>    </div><div class="row tasks">        <div class="col-md-6">          <p><span>Identify your campaign audience.</span>Who are we talking to here? Understand your buyer persona before launching into a campaign, so you can target them correctly.</p>        </div>        <div class="col-md-2">          <label>2014-01-29</label>        </div>        <div class="col-md-2">          <input name="progress" class="progress" type="checkbox" value="10">        </div>        <div class="col-md-2">          <input name="done" class="done" type="checkbox" value="20">        </div>      </div><!-- tasks -->
<div class="row tasks">        <div class="col-md-6">          <p><span>Set your goals + benchmarks</span>Having SMART goals can help you besure that you’ll have tangible results to share with the world (or yourboss) at the end of your campaign.</p>        </div>        <div class="col-md-2">          <label>2014-01-25</label>        </div>        <div class="col-md-2">          <input name="progress" class="progress" type="checkbox" value="30">        </div>        <div class="col-md-2">          <input name="done" class="done" type="checkbox" value="40">        </div>      </div><!-- tasks -->

---

Related Topics