JSFiddle - React, Tailwind, and code Playground

by Annie Lagang

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
Click on the circle
<div class="pie" data-x="0">
    <div class="clip1">
        <div class="slice1"></div>
    </div>
    <div class="clip2">
        <div class="slice2"></div>
    </div>
    <div class="inner">
      <div class="status"></div>
    </div>
    <div class="outher">
    </div>
</div>
<div class="debug">
</div>
</div>

CSS

*, *:after, *:before {
    margin:0;
    padding:0;
    box-sizing:border-box;
    -webkit-animation-fill-mode: both; /* Chrome, Safari, Opera */
    animation-fill-mode: both
}
.pie {
    background-color:darkorange;
    margin:30px;
    width:200px;
    height:200px;
    -moz-border-radius:100px;
    -webkit-border-radius:100px;
    border-radius:50%;
    position:relative;
    overflow:hidden;
}
.clip1 {
    position:absolute;
    top:0;
    left:0;
    width:200px;
    height:200px;
    clip:rect(0px, 200px, 200px, 100px);
    box-shadow:0 2px 2px rgba(0,0,0,0.2) inset;
    border-radius:50%;
}
.slice1 {
    position:absolute;
    width:200px;
    height:200px;
    clip:rect(0px, 100px, 200px, 0px);
    -moz-border-radius:100px;
    -webkit-border-radius:100px;
    border-radius:100px;
    background-color:limegreen;
    border-color:#f7e5e1;
    -moz-transform:rotate(0);
    -webkit-transform:rotate(0);
    -o-transform:rotate(0);
    transform:rotate(0);
    transition:all 0.3s linear 0s;
}
.clip2 {
    position:absolute;
    top:0;
    left:0;
    width:200px;
    height:200px;
    clip:rect(0, 100px, 200px, 0px);
    box-shadow:0 2px 2px rgba(0,0,0,0.2) inset;
    border-radius:50%;
}
.slice2 {
    position:absolute;
    width:200px;
    height:200px;
    clip:rect(0px, 200px, 200px, 100px);
    -moz-border-radius:100px;
    -webkit-border-radius:100px;
    border-radius:100px;
    background-color:limegreen;
    border-color:#f7e5e1;
    -moz-transform:rotate(0);
    -webkit-transform:rotate(0);
    -o-transform:rotate(0);
    transform:rotate(0);
    transition:all 0.3s linear 0.3s;
}
.status {
    position:absolute;
    height:30px;
    width:100%;
    line-height:60px;
    text-align:center;
    top:50%;
    margin-top:-35px;
    font-size:16px;
    font-family:verdana;
}

.inner {
    position:absolute;
    height:80%;
    width:80%;
    line-height:60px;
    text-align:center;
    top:50%;
    left:50%;
    margin-top:-40%;
    margin-left:-40%;
   ...

JavaScript

$(document).ready(function () {
function getAngle(cx, cy, ex, ey, offset) {
  var dy = ey - cy;
  var dx = ex - cx;
  var theta = Math.atan2(dy, dx); // range (-PI, PI]
  theta *= 180 / Math.PI; // rads to degs, range (-180, 180]
  if (typeof offset != 'undefined')
		theta+=offset;
  if (theta < 0) theta = 360 + theta; // range [0, 360)
	
	return theta;
}
    //progressBarUpdate(90,100);
    progressBarUpdate(0,360);
    $('.pie').click(function(e){
       //progressBarUpdate(parseInt(Math.random()*100),100);
       var ex = e.clientX-$(this).offset().left;
       var ey = e.clientY-$(this).offset().top;
       var cx = $(this).width()/2;
       var cy = $(this).height()/2;
       var angle = getAngle(cx, cy, ex, ey,90);
       $('.debug').text(ex + ' ' + ey + ' ' + cx  + ' ' + cy + ' DEG: ' + angle );
       progressBarUpdate(parseInt(angle),360);
    })
    function angle(cx, cy, ex, ey) {
      var dy = ey - cy;
      var dx = ex - cx;
      var theta = Math.atan2(dy, dx); // range (-PI, PI]
      theta *= 180 / Math.PI; // rads to degs, range (-180, 180]
      //if (theta < 0) theta = 360 + theta; // range [0, 360)
      return theta;
    }
   /* setInterval(function(){
      var val = parseInt($(".pie").attr('data-x'));
    	if (val < 100){
         val+=20;
      } else
				val = 0;
				progressBarUpdate(val,100);
    }, 600);
    */
});

function rotate(element, degree) {
    element.css({
        '-webkit-transform': 'rotate(' + degree + 'deg)',
        '-moz-transform': 'rotate(' + degree + 'deg)',
        '-ms-transform': 'rotate(' + degree + 'deg)',
        '-o-transform': 'rotate(' + degree + 'deg)',
        'transform': 'rotate(' + degree + 'deg)',
        'zoom': 1
    });
}

function progressBarUpdate(x, outOf) {
    var firstHalfAngle = 180;
    var secondHalfAngle = 0;
    var oldAngle = parseInt($(".pie").attr('data-angle'));
    // caluclate the angle
    var drawAngle = x / outOf * 360;

    // calculate the angle to be displayed if each half
...