i would like to know how can we make a progress bar change its color as the percentage value increases.
I want the progress bar to show a red(danger) until 33%. Then turn blue upto 66% and then turn green until 100%. Can this be done using angular js?
Use ng-class.
ui.bootstrap has a good example of this for its rating control, using this technique:
ng-class="{'label-warning': percent<33, 'label-info': percent>=33 && percent<66, 'label-success': percent>=66}"
This works for progress bars as well. You just need to define percent somewhere. http://plnkr.co/iBliMPYnWbsJJCtzqWTu
Update:
Here are classes intended for bootstrap progress bars:
ng-class="{'progress-bar-danger': percent<33, 'progress-bar-info': percent>=33 && percent<66, 'progress-bar-success': percent>=66}"
Well you can use angular-ui bootstrap's <progressbar> directive.
The colors that you suggest for the percentages exists in their collection of colors to be assigned as types in a specific state of the progress that you define. These state definitions such as the change in color from a specific value percentage can be manipulated in your controllers. Simply follow the angular-ui implementation with their <progressbar> directive.
type if you want controller to manage it, instead of ng-class.