.ko-progress-circle {width: 120px;height: 120px;background-color: #d9d9d9;border-radius: 50%
}.ko-progress-circle .ko-progress-circle__slice,
.ko-progress-circle .ko-progress-circle__fill {width: 120px;height: 120px;position: absolute;-webkit-backface-visibility: hidden;transition: transform 1s;border-radius: 50%
}.ko-progress-circle .ko-progress-circle__slice {clip: rect(0px,120px,120px,60px)
}.ko-progress-circle .ko-progress-circle__slice .ko-progress-circle__fill {clip: rect(0px,60px,120px,0px);background-color: #1291d4
}.ko-progress-circle .ko-progress-circle__overlay {width: 105px;height: 105px;position: absolute;margin: 7.5px;background-color: #fbfbfb;border-radius: 50%
}

<div class="ko-progress-circle" data-progress="30"><div class="ko-circle"><div class="full ko-progress-circle__slice"><div class="ko-progress-circle__fill"></div></div><div class="ko-progress-circle__slice"><div class="ko-progress-circle__fill"></div><div class="ko-progress-circle__fill ko-progress-circle__bar"></div></div></div><div class="ko-progress-circle__overlay"></div>
</div>

$('.ko-progress-circle').each(function(index, element) {var progress = $(this).data('progress');var degree = parseInt(progress) * 1.8;$(this).find('.ko-progress-circle__slice.full,.ko-progress-circle__fill').css('transform', 'rotate(' + degree + 'deg)');$(this).find('.ko-progress-circle__fill.ko-progress-circle__bar').css('transform', 'rotate(' + (degree * 2) + 'deg)');
});