- A round progress bar using Angular JS
- Install angular-round-progress with Bower.
$ bower install angular-round-progress --save
- Add these libraries to your page:
<link href="bower_components/angular-round-progress/dist/angular-round-progress.min.css" rel="stylesheet"></link>
...
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-round-progress/dist/angular-round-progress.min.js"></script>
- Inject the
angularRoundProgressBar module into your app:
angular.module('myApp', ['angularRoundProgressBar']);<div round-progress-bar
thickness : 20,
size : 240,
baseColor : '#5cb85c',
dangerColor: '#d9534f',
warningColor: '#f0ad4e',
dangerLevel: 50,
warningLevel: 74
></div>
thickness: Sets the thickness of the progress barsize: Length of the diameter of the progress barbaseColor: String, the main color of the progress bardangerColor: String, the color of the progress bar when it reaches the danger levelwarningColor: String, the color of the progress bar when it reaches the warning leveldangerLevel: Threshold to activate the danger-color of the progress barwarningLevel: Threshold to activate the warning-color of the progress bar