CODEWITHSUNDEEP
angularjstwitter-bootstrap
Abhishek
Abhishek

Reputation: 3068

Bootstrap progress bar colors using angular js

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?

Upvotes: 1

Views: 4677

Answers (2)

ryeballar
ryeballar

Reputation: 30098

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.

Upvotes: 2

j.wittwer
j.wittwer

Reputation: 9497

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}"

Upvotes: 2

Related Questions