How to add multi colored percentage bar that changes colors according to its progress?

Jquery that i use to get the progress and add the percentage!

/* getting the percentage of the multi step verification */

$('.track').change(function(e) {
    update_percentage();
});
// supports any number of inputs and calculates done as %
function update_percentage() {
    var count = $('.track').length;
    var length = $('.track').filter(function() {
        return this.value;
    }).length;
    var done = Math.floor(length * (100 / count));
    $('.perc').text(done);

    $('.meter').width(done + "%");

        $(document).ready(function(){
        $a = done;
        $("#applicant_percentages").val($a);
    });
}

This is where the progress meter is shown in a bar as well as in percentage

<div class="progress-meter">
        <h5>Profile Strength <span class='perc'>0</span>%</h5>
        <span class="meter"></span>
        <br>
    </div>

CSS

.meter {
 display: inline-block;
  width: 0;
  height: 20px;
  margin-bottom: 10px;
  background-color:green;
}

I am getting the percentage of the number of input that are filled in a form! i have put the value i take into a progress bar .. but now what need the to change the colors of the progress bar once they reach certain values.

And sorry if i am unclear!