<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.js"></script>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
</style>
</head>
<body ng-app>
<svg class="svgcircle" width="300" height="300">
<defs>
<filter width="300" height="300" x="0" y="0" id="blur" filterUnits="userSpaceOnUse">
<feGaussianBlur stdDeviation="6" />
</filter>
</defs>
<circle cx="150" cy="150" r="100" stroke="whitesmoke" class="circle1" stroke-width="15" fill="none"
></circle>
<circle
cx="150" cy="150" r="100" stroke="rgb(255,200,0)" class="circle2" stroke-width="14"
filter=url("#blur") fill="none" stroke-dasharray="{{inputNum*6.28}},{{(314-inputNum)*6.28}}" stroke-linecap='butt'
></circle>
<circle
ng-class="{'bad':inputNum<40,'great':inputNum>=80}" cx="150" cy="150" r="100" stroke="rgb(255,200,0)" class="circle2" stroke-width="14" fill="none" stroke-dasharray="{{inputNum*6.28}},{{(314-inputNum)*6.28}}" stroke-linecap='butt'
></circle>
<text x="150" y="150" text-anchor="middle" style="font-size:24px;">{{inputNum}}%</text>
</svg>
</div>
<input ng-model='inputNum' type="range" ng-init="inputNum=100">
</body>
</html>
// Code goes here
/* Styles go here */