JSFiddle - React, Tailwind, and code Playground

by beneverard

HTML

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="demo">
{{ progress }}
	<input type="range" v-model="progress" min="0" max="100" />

	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 207 207">
	
		<g fill="none" fill-rule="evenodd" stroke="#000">

			<circle
				cx="103.5"
				cy="103.5"
				r="100.5"
				stroke-width="6"
				:stroke-dasharray="circumference + ' ' + circumference"
				:style="{ strokeDashoffset }"
			/>
			
			<path stroke-linecap="square" stroke-width="4.5" d="M58.5 56.539l90 71"/>
			<path stroke-linecap="square" stroke-width="4.5" d="M58.5 127.539l90-71"/>
			<path stroke-linecap="square" stroke-width="4.5" d="M148.5 121.539l-41-80"/>
			<path stroke-linecap="square" stroke-width="4.5" d="M58.5 121.539l41-80"/>
			<path stroke-linecap="square" stroke-width="4.5" d="M103.5 40.222V170.04"/>
			<path stroke-width="5.5" d="M103.5 37.347a81.651 81.651 0 0 1-2.083 1.951 58.081 58.081 0 0 1-5.973 4.746c-9.84 6.798-22.418 10.854-39.194 11.25v76.36c0 8.462 8.835 17.827 23.689 26.945 5.37 3.296 11.138 6.322 16.908 9.006a172.88 172.88 0 0 0 6.653 2.929 172.88 172.88 0 0 0 6.653-2.929c5.77-2.684 11.538-5.71 16.908-9.006 14.854-9.118 23.689-18.483 23.689-26.945v-76.36c-16.776-.396-29.355-4.452-39.194-11.25a58.081 58.081 0 0 1-5.973-4.746 81.651 81.651 0 0 1-2.083-1.951z"/>
			
		</g>
		
	</svg>

</div>

CSS

circle {
	transition: stroke-dashoffset 0.2s;
	transform: rotate(-90deg);
	transform-origin: 50% 50%;
  
  
}

JavaScript

// https://css-tricks.com/building-progress-ring-quickly/

new Vue({

	el: '#demo',

	data: {
   		 progress: 40
	},
  
 	computed: {
	
		normalizedRadius() {
			return 100.5;
		},

		circumference() {
			return this.normalizedRadius * 2 * Math.PI;
		},
		
		strokeDashoffset() {
			return this.circumference - (100 - this.progress) / 100 * this.circumference;
		}

	}
  
})