https://github.com/mrmaddotta/ng-halo
AngularJS directive to create animated donut charts
https://github.com/mrmaddotta/ng-halo
angularjs donut halo svg
Last synced: 7 months ago
JSON representation
AngularJS directive to create animated donut charts
- Host: GitHub
- URL: https://github.com/mrmaddotta/ng-halo
- Owner: mrmaddotta
- License: mit
- Created: 2017-08-25T08:27:43.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-09-08T11:34:48.000Z (about 8 years ago)
- Last Synced: 2025-03-13T16:03:01.615Z (8 months ago)
- Topics: angularjs, donut, halo, svg
- Language: JavaScript
- Homepage:
- Size: 61.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ng-halo
A simple, lightweight halo directive for AngularJS
### Installation
`$ bower install ng-halo`
Make sure to include the provided script and CSS:
``
``
Include the ng-halo dependency to your app:
`var app = angular.module('demoapp', ['ng-halo']);`
### Current Options
`percentage` (Int) 0-100, the percentage of the halo that should be filled.
`stroke-width` (Int) The stroke width of the halo
`stroke-color` (String) Hex colour value (e.g. '#0083a9') of the filled part of the halo.
### Example
```
```
```
angular
.module('app', [
'ng-halo',
])
.controller("SomeController", ['$scope', '$interval', function($scope, $interval) {
$scope.haloPercentage = 50;
var interval = $interval(function() {
$scope.haloPercentage = Math.floor(Math.random() * 100) + 1;
}, 1000);
}]);
```
### Customising
The halo fills it's parent element so to change it's size, just update the width/height of it's parent element.
If you need to tweak things more, here is a CSS snippet to help override the default styling
```
.ng-halo-holder {
width: 100%;
height: 100%;
.donut-ring {
// full halo behind the main halo
stroke: rgba(0, 0, 0, 0.1);
}
circle {
// the animation speed when the halo percentage changes
transition: all 0.5s ease;
}
}
```