Angular Progress Pie

A simple pie progress indicator for AngularJS. Written in pure Angular, using SVG to render the progress indicator. Tiny, simple and no external dependencies.

Plunker Example

Contributing

If you have a feature or fix please submit a pull request! This repo follows JavaScript standard style, please make sure all pull requests comply to this before submitting them.

Installation

bower install angular-progress-pie --save

Usage

Make sure you inject the dependency into your project

angular.module('myApp', ['angular-progress-pie'])

Then you can use the directive by adding the progress-pie element to your HTML.

<progress-pie    radius="{integer}"   value="{integer}"    min="{integer: optional, defaults to 0}"   max="{integer: optional, defaults to 100}"   invert-fill="{boolean: optional, defaults to false}"   hide-background="{boolean: optional, defaults to false}"> </progress-pie> 

Options

• radius - Integer specifying the radius of the pie. Defaults to 50px.
• value - Integer percentage between 0 and 100 of how complete the pie is. (note the limits can be changed by setting max and min)
• min - Integer lower bound of value
• max - Integer upper bound of value
• invert-fill - Boolean which determines if the pie builds up to a full pie, or shrinks from a full pie to nothing. Defaults to false which means the pie starts as nothing when value is zero and becomes full when value is 100.
• hide-background - Boolean which toggles the background on and off

Styling

You can style the pie using CSS

.progress-pie {   fill: #EFEEDE }  .progress-pie-background {   fill: #FFCC03 } 

Author

Ashok Fernandez