Simple pie progress indicator for AngularJS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
lib
.gitignore
LICENSE
README.md
bower.json
circle.yml
gulpfile.js
package.json

README.md

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.

js-standard-style

Circle CI

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