angular-progress-circle

by Bram Gadeyne

HTML

<div ng-app="be.cprtest.progresscircle">
<svg ng-controller="ProgressCircleController as progressCircleCtrl" ng-attr-height="{{height}}" ng-attr-width="{{height}}">
    <circle class="circle_progress_background" ng-attr-cx="{{progressCircleCtrl.getCenter()}}" ng-attr-cy="{{progressCircleCtrl.getCenter()}}" ng-attr-r="{{progressCircleCtrl.getR()}}" ng-attr-stroke-width="{{borderwidth}}"></circle>
    <circle class="circle_progress_foreground" ng-attr-cx="{{progressCircleCtrl.getCenter()}}" ng-attr-cy="{{progressCircleCtrl.getCenter()}}" ng-attr-r="{{progressCircleCtrl.getR()}}" ng-attr-stroke-width="{{borderwidth}}" ng-attr-stroke-dasharray="{{ progressCircleCtrl.getStrokeDashArray() }}" ng-attr-transform="rotate(-90 {{progressCircleCtrl.getCenter()}} {{progressCircleCtrl.getCenter()}})"></circle>
    <text class="circle_progress_text" text-anchor="middle" x="50%" y="50%" dy=".3em" id="_cir_Per">{{progressCircleCtrl.getText()}}</text>
</svg>
</div>

CSS

.circle_progress_background{
  stroke:rgba(232, 84, 58, .3) ;
  fill:none;
}

.circle_progress_foreground{
  stroke:rgba(232, 84, 58, 1) ;
  fill:none;
}

.circle_progress_text{
  font-size: 100px;
  fill: rgb(125, 125, 125);
}

JavaScript

var CPRTest;
(function (CPRTest) {
    var ProgressCircleController = (function () {
        function ProgressCircleController($scope, progressCircleService) {
            this.$scope = $scope;
            this.progressCircleService = progressCircleService;
            this.$scope.height = 380;
            this.$scope.borderwidth = 20;
        }
        ProgressCircleController.prototype.getText = function () {
            return this.progressCircleService.getSeconds() + "''";
        };
        ProgressCircleController.prototype.getCenter = function () {
            return Math.floor(this.$scope.height / 2);
        };
        ProgressCircleController.prototype.getR = function () {
            return this.getCenter() - this.$scope.borderwidth;
        };
        ProgressCircleController.prototype.getCircleBorderLength = function () {
            return 2 * Math.PI * this.getR();
        };
        ProgressCircleController.prototype.getPercentComplete = function () {
            return this.progressCircleService.getSeconds() / this.progressCircleService.getMaxSeconds();
        };
        ProgressCircleController.prototype.getStrokeDashArray = function () {
            return Math.floor(this.getPercentComplete() * this.getCircleBorderLength()) + "," + this.getCircleBorderLength();
        };
        ProgressCircleController.$inject = ['$scope', 'progressCircleService'];
        return ProgressCircleController;
    }());
    var ProgressCircleDirective = (function () {
        function ProgressCircleDirective() {
            this.templateUrl = "ng/ng-progress-circle/progress-circle.html?version=1.0.5";
            this.controller = 'ProgressCircleController';
            this.controllerAs = 'progressCircleCtrl';
            this.templateNamespace = "svg";
            this.restrict = 'A';
            this.scope = {};
        }
        return ProgressCircleDirective;
    }());
    var ProgressCircleDirectiveFactory;
    ProgressCircleDirectiveFactory = function ()...