JSFiddle - React, Tailwind, and code Playground

by Sergei Sokolov

HTML

<svg width="300" viewBox="0 0 220 220" xmlns="http://www.w3.org/2000/svg">
  <g transform="translate(110,110)">
    <circle r="100" class="e-c-base"/>
		<g transform="rotate(-90)">
      <circle r="100" class="e-c-progress"/>
			<g id="e-pointer">
				<circle cx="100" cy="0" r="8" class="e-c-pointer"/>
			</g>
		</g>
	</g>
</svg>
<div>
  <input type="range" min=0 max=100 value=85 step="0.01" id="in-value">
	<span id="e-indicator"></span>
</div>

CSS

.e-c-base {	fill:none; stroke:#CCC; stroke-width:4px}
.e-c-progress {	fill:none; stroke:#F60; stroke-width:4px;
  transition: stroke-dashoffset 2s;}
.e-c-pointer {fill:#FFF; stroke:#F60; stroke-width:2px}
#e-pointer {transition: transform 2s}

JavaScript

/**
 * для вопроса https://toster.ru/q/449024
 * Как построить похожий график?
 */
var $progress = $('.e-c-progress')
  ,$indi = $('#e-indicator')
  ,$pointer = $('#e-pointer')
  ,len = Math.PI * 2 * 100
;
$progress.css('stroke-dasharray', len);


function update(v) {
	$indi.text(v);
	var offset = - len - len * v / 100;
	$progress.css('stroke-dashoffset', offset);
	$pointer.css('transform','rotate(' + (360*v/100) + 'deg)');
};

update(85);

$('#in-value').on('input', function() {
  update( $(this).val());
});