Radial progress bars

progress-bar.jade

div.quick-stats-single(data-name='{{ title }}')
	svg(viewBox='-10 -10 220 220')
		path(d='M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z')
	svg(viewBox='-10 -10 220 220')
		path(d='M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z' stroke-dashoffset='{{animationAmount}}')
	span.quick-stats-number(count-to="{{ percent }}")

progress-bar.js

var progressBar = angular.module('progressBar', [])
.directive('progressBar', ['$timeout', function ($timeout) {
    return {
        replace: false,
        scope: true,
        templateUrl: '/templates/directives/progress-bar.html',
        scope: {
            title: '=title',
            percent: '=percent'
        },
        link: function (scope, element, attrs) {

            scope.animationAmount = ((6.3 * Math.min(Math.max(parseInt(scope.percent), 1), 100)) + 630);
            scope.percent = scope.percent + '%';
        }
    }
}]);

progress-bar.scss

.quick-stats-single {
	margin-top: $baseline;
	display: inline-block;
	float: left;
	width: 25%;
	position: relative;
	.quick-stats-number {
	    position: absolute;
	    width: 100%;
	    top: 42%;
	    left: 0;

	    text-align: center;
		
		color: $corporate-gold;
		font-size: 26pt;
		font-weight: $fw-heavy;
	}
	&:before {
	    content: attr(data-name);
	    color: $highlight-text-color;
		font-size: $fs-small;
		font-weight: $fw-bold;
		text-transform: uppercase;
		text-align: center;

	    position: absolute;
	    width: 100%;
	    bottom: -1.5rem;
	}
	svg {
	    width: auto;
	    height: auto;
		path {
			fill: none;
			stroke-width: 7;
			stroke: #fff;
			opacity: 0.3;
		}
		&:nth-child(2) {
			position: absolute;
			//height: 150px;
			left: 0;
			top: 0;
			@include rotate(-90deg);
			path {
			    stroke-dasharray: 630;
			    stroke-linecap: round;
			    opacity: 1;
			    @include animation(circleAnimation 2s ease-out 3.5s backwards);
			}
		}
	}

}
		
@include keyframes(circleAnimation) {
	0%{
		stroke-dashoffset:630;
	}
}