JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div class="timer fill">
</div>

CSS

.timer {
    position: relative;
    width: 4em;
    height: 4em;
    float: left;
    margin: 1px 30px 0 0;
}


.timer > #slice {
    position: absolute;
    width: 4em;
    height: 4em;
    clip: rect(0px, 4em, 4em, 2em);
}

.timer > #slice.gt50 {
    clip: rect(auto, auto, auto, auto);
}

.timer > #slice > .pie {
    border: 3.2em solid green;
    position: absolute;
    width: 3.8em;
    height: 3.8em;
    clip: rect(0em, 2em, 4em, 0em);
    -moz-border-radius: 2em;
    -webkit-border-radius: 2em;
    border-radius: 2em;
}

.timer > #slice > .pie.fill {
    -moz-transform: rotate(180deg) !important;
    -webkit-transform: rotate(180deg) !important;
    -o-transform: rotate(180deg) !important;
    transform: rotate(180deg) !important;
}

.timer.fill > #slice > .pie {
    border: transparent;
    background-color: green;
    width: 4em;
    height: 4em;
}

JavaScript

const PIE_INTERVAL_TIME = 1000; // one second interval time
const PERCENT_INTERVAL = 1.67; // 100 / 60 seconds
const stopInterval = setInterval(pieInterval(), PIE_INTERVAL_TIME);

function pieInterval() {
	let percent = 0;
	return function() {
    	percent += PERCENT_INTERVAL;
			const timer = $('.timer');
			const gt50 = percent > 50 ? 'gt50' : '';
			const pieFill = percent > 50 ? '<div class="pie fill"></div>' : '';
      let deg = (360/100) * percent;
			timer.html(
				`<div id="slice" class="${gt50}">
					<div class="pie"></div>
					${pieFill}
				</div>`);
        
      if (percent >= 100) {
      	deg = 360;
				clearInterval(stopInterval);
			}

			$('#slice').find('.pie').css({
				'-moz-transform':'rotate('+deg+'deg)',
				'-webkit-transform':'rotate('+deg+'deg)',
				'-o-transform':'rotate('+deg+'deg)',
				'transform':'rotate('+deg+'deg)'
			});
	};
}