Pie chart for locations 2

pie chart for click

by Lio Fleishman

HTML

<div ng-app="myApp" ng-controller="myCtrl">
  <pie-chart label="10" percent="34" size="200" labeltext="'items'"></pie-chart>
</div>

SCSS

.pie {
  position: relative;
  width: 100%;
  height: 100%;
  line-height: 100px;
  border-radius: 50%;
  background: #d4d4d4;
  background-image:linear-gradient(to right, transparent 50%, #ea8c17 0);
  color: transparent;
  text-align: center;
}
.pie::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 50%; height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background-color: inherit;
  transform-origin: left;
  animation: spin 50s linear infinite, bg 100s step-end infinite;
  animation-play-state: paused;
  animation-delay: inherit;
  }
    
@keyframes spin {
  to { transform: rotate(.5turn); }
}
@keyframes bg {
  50% { background: #ea8c17; }
}

.pie_container {
  position:relative;
  display: flex;
  justify-content: center;
}
.pie_label {
    font-family: Helvetica Neue, sans-serif;
    width: 80%;
    height: 80%;
    font-size: 2em;
    text-align: center;
    font-weight: 300;
    color: #000;
    z-index: 999;
    position: absolute;
    background-color: #fff;
    border-radius: 50%;
    top: 10%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.labeltxt {
  text-align: center;
  font-size: 2rem;
}

JavaScript

angular.module('myApp', [])
.controller('myCtrl',["$scope", function($scope){

}])
.directive('pieChart', function(){
	return {
  	restrict: 'E',
    transclude: true,
    scope: {
      label: '=',
      percent: '=',
      size: '=',
      labeltext: '='
    },
    template:'<div class="pie_container" style="width:{{size}}px; height: {{size}}px">'+
    					'<span class="pie_label"><p>{{label}}</p><p class="labeltxt">{{labeltext}}</p></span>'+
    						'<div class="pie" style="animation-delay: -{{percent}}s; width:{{size}}px; height: {{size}}px">{{percent}}</div>'+
  					'</div>',
    link: function(scope, element, attrs) {
			if(scope.percent == 100){
       console.log('is 100!')
      }
    }
  }
})