AngularJS module that uses SVG to create a circular progressar
Include Angular and roundProgress.js
or roundProgress.min.js
in your page. You can use bower, or a script-tag:
bower install angular-svg-round-progressbar
or
<script src="http://crisbeto.github.io/angular-svg-round-progressbar/roundProgress.min.js"></script>
Add angular-svg-round-progress
to your app's module dependencies:
angular.module('someModule', ['angular-svg-round-progress'])
current
current progress, some value on the scope or a numbermax
maximum value, some value on the scope or a numberradius
radius of the circlecolor
hex color for thecurrent
value, example:#45ccce
bgcolor
hex background color, example:#eaeaea
stroke
specifies the thickness of the linesemi
boolen, specifies whether the progressbar should be a semicircle or a full circle- To manually trigger a complete re-render of the progressbar, broadcast a "renderCircle" from a parent scope:
$rootScope.$broadcast('renderCircle');
<div
round-progress
max="max"
current="current"
color="#45ccce"
bgcolor="#eaeaea"
radius="100"
stroke="20"
semi="true">
</div>
- Internet Explorer 9+
- Firefox 28.0+
- Chrome 31+
- Safari 5.1+
- and pretty much any browser that supports SVG
npm install
to install development dependenciesgrunt
to build minified demo in build/grunt deploy
to build minified demo and push it to gh-pages branch