JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div id="readout">
	<svg viewBox="0 0 100 100">
		<circle r="30" cx="50" cy="50" id="pie" fill="none" />
	</svg>
	<output for="utilslider">0</output>
</div>
<input type="hidden" min="0" max="10" value="4.6" id="utilslider">

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body { 
  background: radial-gradient(rgba(161, 222, 240, 0.75), rgba(64, 129, 147, 0.75)), url(http://i.imgur.com/3JZchqt.png), url(http://i.imgur.com/9kxBTzr.jpg);
  text-align: center; 
  font-family: Open Sans, sans-serif;
}
#readout {
	position: relative;
	width: 100%;
	height: 100%;
}
svg {
	transform: rotate(-90deg);
	width: 60%;
	height: 60%;
}
label { 
	display: block;
	font-size: 2rem;
  font-weight: 900;
	}
#pie {
	stroke: #ed1b24;
	stroke-width: 10;
	stroke-dasharray: 0 314; 
  transition:stroke-dasharray 2s;
}
output { 
	position: absolute;
	color: #ed1b24;
	font-size: 3rem;
	z-index: 10;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
#utilslider {
  position:absolute !important;overflow:hidden;width:1px;height:1px;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);
}

JavaScript

function pieSlicer() {
  var percentValue = (utilslider.value / 10) * circumference;
		pie.style.strokeDasharray = percentValue + " " + circumference;
			/* pie.style.stroke = "hsl(0 ," + utilslider.value + "%, 50%)"; */
			percentDisplay.innerHTML = utilslider.value + "%";
}

var utilslider = document.getElementById("utilslider"),
circle = document.getElementById("pie"),
radius = parseInt(circle.getAttribute('r'), 10),
circumference = 2 * radius * Math.PI,
percentDisplay = document.querySelector("#readout output");
	utilslider.addEventListener("input", 
		function() { pieSlicer(); }
	)
	
pieSlicer();

$('output').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {
        duration: 2000,
        easing: 'swing',
        step: function (now) {
            $(this).text(now.toFixed(1));
        }
    });
});