Knob using SVG

HTML

<p style="position:absolute;margin-left:95px;margin-top:50px;" id="percentage">0 %</p>

CSS

.progress-bar1 div {
  position: absolute;
  height: 100px;
  width: 100px;
  border-radius: 50%;
}

.progress-bar1 div span {
  position: absolute;
  font-family: Arial;
  font-size: 25px;
  line-height: 75px;
  height: 75px;
  width: 75px;
  left: 12.5px;
  top: 12.5px;
  text-align: center;
  border-radius: 50%;
  background-color: white;
}

.progress-bar1 .background { background-color: #b3cef6; }

.progress-bar1 .rotate {
  clip: rect(0 50px 100px 0);
  background-color: pink;
}

.progress-bar1 .left {
  clip: rect(0 50px 100px 0);
  opacity: 1;
  background-color: hotpink;
}

.progress-bar1 .right {
  clip: rect(0 50px 100px 0);
  transform: rotate(180deg);
  opacity: 0;
  background-color: #4b86db;
}
 
@keyframes
toggle {  0% 
{
 opacity: 0;
}
 100% {
 opacity: 1;
}
}

JavaScript

$(".progress-bar-demo").loading();
$(".progress-bar-demo").loading({
  backgroundColor: '#b3cef6',
  progressColor: '#4b86db',
  percent: 75,
  duration: 2000
});

var createKnobSVG = function($input,id) {
	
		$container = jQuery('<div class="container">'),
		$svg       = jQuery('<svg id="'+ id + '" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">');
		$container.append($svg);
		$container.insertBefore($input);
		//$container.append($input);
		 
		 
		var body = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
		body.setAttributeNS(null, 'cx',  110);
		body.setAttributeNS(null, 'cy',  60);
		body.setAttributeNS(null, 'r',  50);
		body.setAttributeNS(null, 'fill', 'none');
		body.setAttributeNS(null, 'stroke', '#e4e4e4');
		body.setAttributeNS(null, 'stroke-width', 10);
		body.setAttributeNS(null, 'style', '-webkit-tap-highlight-color: rgba(0, 0, 0, 0);');
		
		// center knob in container
		//body.setAttributeNS(null, 'transform', 'translate(' + $container.outerWidth()/2 + ', ' + $container.outerHeight()/2 + ')');
		
		var rotatePath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
		rotatePath.setAttributeNS(null, 'id', 'svg_path');
		rotatePath.setAttributeNS(null, 'stroke-width',  10);
		rotatePath.setAttributeNS(null, 'd', "M60,60 A50,50 0 0,1 160,60");
		rotatePath.setAttributeNS(null, 'stroke', "#16a6b6");
		rotatePath.setAttributeNS(null, 'style', "-webkit-tap-highlight-color: rgba(0, 0, 0, 0);");
		rotatePath.setAttributeNS(null, 'fill', 'none');
		
		var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
		text.setAttributeNS(null, 'x', '70');
		text.setAttributeNS(null, 'y', '75');
		text.setAttributeNS(null, 'font-size', '39');
		text.setAttributeNS(null, 'font-family', 'Calibri');
		text.setAttributeNS(null, 'id', 'perval');
		jQuery(text).append('0%');
		$svg.append(body);
		$svg.append(rotatePath);
		$svg.append(text);
	};
	jQuery(document).ready(function() {
		//var...