angular-circular-progress's Introduction

Angular Circular Progress

AngularJS module that creates circular progress bars

Usage

Download

Simply include dist/circularProgress.min.js (or circularProgress.min.js) in your page

You also can use Bower by running bower install angular-circular-progress

Usage

Add angular-circular-progress to your app's module dependencies:

angular.module('myModule', ['angular-circular-progress'])

Example:

<circular-progress
    value="50"
    max="100"
    orientation="1"
    radius="80"
    stroke="20"
    base-color="#ffff00"
    progress-color="#00ff00"
    iterations="100"
    animation="easeInOutCubic"
></circular-progress>

See demo file for more informations

Options

Name	Description	Required	Default value	Possible values
`value`	The current progress. Limited by the `max` option.	Yes	0	Integer
`max`	The progress' maximum value.	Yes	100	Integer
`orientation`	Whether the progressbar should rotate clockwise or counter-clockwise.	No	1	Boolean
`radius`	Radius of the circle.	No	80	Integer
`stroke`	Specifies the circle's thickness.	No	20	Integer
`base-color`	Color of the circle's background.	No	#a2a2a2	Hex color
`progress-color`	The color of the `current` value on the circle.	No	#ca2014	Hex color
`iterations`	Number of iterations for the animation. Set it to 1 for no animation and increase for slower animation.	No	100	Integer
`animation`	The easing function that will be used when animating.	No	easeInOutCubic	linearEase easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInOutCubic easeInQuart easeOutQuart easeInOutQuart easeInQuint easeOutQuint easeInOutQuint easeInSine easeOutSine easeInOutSine easeInExpo easeOutExpo easeInOutExpo easeInCirc easeOutCirc easeInOutCirc easeInElastic easeOutElastic easeInOutElastic easeInBack easeOutBack easeInOutBack easeInBounce easeOutBounce easeInOutBounce