angular-circular-progress

AngularJS module that creates circular progress bars

Angular Core Dependency: >=1.3.0

Module License: MIT

Added by: Sam Deering

GitHub

Repository

pistou/angular-circular-progress

Stats

Stars: 1

Watchers: 1

Forks: 0

Module Description

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-svg-round-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"
    baseColor="#a2a2a2"
    progressColor="#ca2014"
    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 | | baseColor | Color of the circle's background. | No | #a2a2a2 | Hex color | | progressColor | 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
|

Development

  • npm install to install development dependencies
  • grunt to build minified demo in dist/

Module stats last updated: 2015-06-04 23:18:41

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!