AngularJS directive for displaying a circular progress meter.
6 people use it


An AngularJS directive for displaying a circular progress meter.


  • Displays a circular progress meter.
  • Utilises SVG for rendering.
  • Adjustable dimensions, color and thickness.
  • No additional dependencies outside of AngularJS.


Include the script in your application and include the angular-progress-arc module as a dependency in your application module.

Add a progress-arc element to your application as required.


  • size defines the pixel width and height for the svg element. This defaults to 200.
  • stroke defines the color of the progress arc. This should be a valid stroke property for an SVG path element. This defaults to black.
  • stroke-width defines the width of the progress arc line in pixels. This should be a value between 1 and size / 2. This defaults to 20.
  • progress is an expression that should evaluate to a float value between 0.0 and 1.0; where 0.0 is an empty progress arc, and 1.0 is a full ring.
  • counter-clockwise if this attribute is present and set to a "truthy" value (true, yes, 1) the progress bar will render in a counter-clockwise direction.


As well as using attributes of the directive element, a progress arc can be styled using CSS.

If you use CSS for styling, try to avoid setting a stroke-width property since this is used to calculate the position of the arc inside the SVG element.


angular-progress-arc is licensed under the MIT license. See LICENSE for details.

comments powered by Disqus
This page was last updated about 4 years ago.