angular-percent-circle-directive
v1.1.1
Published
An Angular directive for adding an animated percent circle.
Downloads
222
Maintainers
Readme
Angular Percent Circle Directive
AngularJS directive for adding animated percent circle.
Getting started
Install via Bower or Node
bower install --save angular-percent-circle-directive
or
npm install --save angular-percent-circle-directive
Link to CSS File
<link rel="stylesheet" type="text/css" href="path/to/dist/percent-circle.css">
Alternatively, if you are using Sass, you can import the provided .scss file into your library
@import "path/to/angular-percent-circle-directive/dist/percent-circle";
Add Script Tag
<script src="path/to/dist/percent-circle-directive.js" type="text/javascript"></script>
Include the percentCircle-directive
dependency in your Angular App
var app = angular.module('percentCircleDemo', ['percentCircle-directive']);
That's it! The directive should now be ready to use.
How to use it
Call the Directive
Enter the percent-circle
tag into your HTML where you would like the percent circle to appear.
<percent-circle percent="myPercentModel"></percent-circle>
percent
is a required attribute. It can either be a number or the name of the scope variable where the percent number is stored (myPercentModel
, in the above case).
Customize the Colors
The directive takes an optional attribute called colors
. The value should be an object with one or all of the following keys:
{
center : 'lightBlue', // the color in the center of the circle. Default: #F5FBFC
highlight : 'black', // the highlighted section of the circle, representing the percentage number. Default: #2BCBED
remaining : 'lightGrey' // the color of the circle before highlighting occurs, representing the amount left until the percent equals 100. Default: #C8E0E8
}
The above customization would appear as:
Add the colors
attribute to the percent-circle
HTML tag like this:
<percent-circle percent="myPercentModel" colors="{center:'green'}"></percent-circle>
The above will change the center of the circle to be green, but continue to use the default colors for highlight
and remaining
.
Customize the Speed
The directive takes an optional attribute called speed
. The value should be a number representing the amount of milliseconds between each percentage increment. Default is 10.
Add the speed
attribute to the percent-circle
HTML tag like this:
<percent-circle percent="myPercentModel" speed="20"></percent-circle>
If you do not want the animation, simply set the speed
attribute to false
.
<percent-circle percent="myPercentModel" speed="false"></percent-circle>
Now the percent circle will jump to the provided percent without incrementing.