JSFiddle - React, Tailwind, and code Playground

by sbaydakov

HTML

<div class="gauge" data-progress="68"></div>

<div id="progress"></div>

http://blakek.us/labs/jquery/css3-pie-graph-timer/

CSS

.gauge {
  width: 10rem; height: 10rem; position: absolute; clip: rect(0, 10rem, 10rem, 5rem);
}
.gauge.gt502 {
	clip:rect(auto, auto, auto, auto);
}

.slice {
  width: 8rem; height: 8rem; border: 1rem solid green; border-radius: 500em; position: absolute; clip: rect(0, 5rem, 10rem, 0);
  -webkit-transition: all 4s linear;
}

.slice.filled {
    -moz-transform:rotate(180deg) !important;
    -webkit-transform:rotate(180deg) !important;
    -o-transform:rotate(180deg) !important;
    transform:rotate(180deg) !important;
}

.gauge {
    -webkit-animation-iteration-count: 1;
    /* Only run once */
    -webkit-animation-fill-mode: forwards;
    /* Hold the last keyframe */
    -webkit-animation-timing-function:linear;
    /* Linear animation */
    -webkit-animation-duration: 0.01s;
    /* Complete keyframes asap */
    -webkit-animation-delay: 3s;
    /* Wait half of the animation */
    -webkit-animation-name: close-wrapper;
    /* Keyframes name */
}
/* Set the wrapper clip to auto, effectively removing the clip */
 @-webkit-keyframes close-wrapper {
    to {
        clip: rect(auto, auto, auto, auto);
    }
}

JavaScript

$(function() {
    var gauge = $('.gauge'),
        progress = gauge.data('progress'),
        percentage = $('#progress');
    
    drawTimer(progress);

    
    function drawTimer(percent){
        gauge.html('<div class="slice left"></div><div class="slice right"></div>');
        
        if (percent > 50) { 
            $('.gauge').addClass('gt50');
            $('.slice.right').addClass('filled');
        } else {
            $('.slice.left').hide();
        }
        
        var deg = 360/100 * percent;
        $('.slice').css({
            '-moz-transform':'rotate('+deg+'deg)',
            '-webkit-transform':'rotate('+deg+'deg)',
            '-o-transform':'rotate('+deg+'deg)',
            'transform':'rotate('+deg+'deg)'
        });
        percentage.html(Math.round(percent)+'%');
    }

});