JSFiddle - React, Tailwind, and code Playground

HTML

<svg class="goal-chart">
  <text x="50%" y="90" class="goal-chart__caption">Выполнено</text>
  <text x="50%" y="125" class="goal-chart__percent">0%</text>
  <circle r="80" cx="100" cy="100" class="goal-chart__inactive"></circle>
  <circle r="80" cx="100" cy="100" class="goal-chart__active" transform="rotate(-90, 100, 100)"></circle>
</svg>

<div class="goal-checkboxes-wrapper">
  <label class="goal-checkbox">
    <input type="checkbox" checked class="goal-checkbox__input"> Наружная реклама
  </label>

  <label class="goal-checkbox">
    <input type="checkbox" checked class="goal-checkbox__input"> Баннеры для контекстной рекламы
  </label>

  <label class="goal-checkbox">
    <input type="checkbox" class="goal-checkbox__input"> Баннеры для SMM
  </label>

  <label class="goal-checkbox">
    <input type="checkbox" class="goal-checkbox__input"> Лендинг для корпоратива
  </label>

  <label class="goal-checkbox">
    <input type="checkbox" class="goal-checkbox__input"> Креатив на афишу
  </label>

  <label class="goal-checkbox">
    <input type="checkbox" class="goal-checkbox__input"> Отрисовка баннеров
  </label>
</div>

CSS

.goal-chart {
  	height: 132px;
  	width: 200px;
  	overflow: visible;
}

.goal-chart__caption {
  font: 14px "Lato-Regular", sans-serif;
  fill: #33b800;
  text-anchor: middle;
}

.goal-chart__percent {
  font: 32px "Lato-Regular", sans-serif;
  fill: #000;
  text-anchor: middle;
}

.goal-chart__active {
  	fill: transparent;
  	stroke-width: 16;
}

.goal-chart__active._transition {
 	  transition: .4s stroke-dashoffset;
}

.goal-chart__inactive {
  	fill: transparent;
  	stroke: #e5e5e5;
  	stroke-width: 16;
  	stroke-dasharray: 0;
  	stroke-dashoffset: 0;
}

.goal-checkboxes-wrapper {
  margin: 100px 0 0;
}

.goal-checkbox {
  display: block;
}

JavaScript

$(function() {

	var $circle = $('.goal-chart__active'),
			$checkboxes = $('.goal-checkbox__input'),
      $percent = $('.goal-chart__percent'),
      checkboxesLength = $checkboxes.length,
      circleLength = $circle.width() * Math.PI;
      
  initCircle();
  
  $checkboxes.on('change', changeHandler);
      
  function updateCircle(length) {
    $circle.css({
    	'stroke-dashoffset': circleLength - length
    });
  }
  
  function initCircle() {
  	$circle.css({
    	'stroke-dasharray': circleLength,
    	'stroke-dashoffset': circleLength,
      'stroke': '#33b800'
		});
    
    setTimeout(function() {
  		changeHandler();    	
    	$circle.addClass('_transition');
    }, 10);
    
  }

	function changeHandler() {
  	var checkedLength = $checkboxes.filter(':checked').length,
    		percent = 100 * checkedLength / checkboxesLength;
        
    $percent.text(Math.ceil(percent) + '%');    
  	updateCircle(circleLength * checkedLength / checkboxesLength);
  }
});