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.
progress-arc element to your application as required.
sizedefines the pixel width and height for the svg element. This defaults to 200.
strokedefines the color of the progress arc. This should be a valid stroke property for an SVG path element. This defaults to black.
stroke-widthdefines the width of the progress arc line in pixels. This should be a value between 1 and
size/ 2. This defaults to 20.
progressis 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-clockwiseif 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.