JSFiddle - React, Tailwind, and code Playground

by walker

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.7.0/less.min.js"></script>
<button id="start" style="margin:30px 0 0 50px; height:24px; width:50px;">rotate</button>
<input type="number" id="deg" value="60" step="5" min="5" max="360" style="height:20px; width:40px;" /> degree, now <i id="cur"></i> degree.
	<div class="radial-progress">
  <div class="circle">
    <div class="mask left">
      <div class="fill"></div>
    </div>
    <div class="mask right">
      <div class="fill"></div>
    </div>
  </div>
</div>

CSS

/*思路：容器只有右半边，内容只有左半边，所以当左半边旋转到右半边时，就可以在容器里看到内容了*/
@size:120px;
@bgcolor:#ddd;
@bgcolor1:#cc7;
@duration:1s;
*{margin:0;padding:0;}
.radial-progress{margin:30px 50px; position: relative;
    .comm(){
		width:@size;height:@size;position: absolute;top:0;left:0;border-radius: 50%;
    }
	.circle{
	     background: @bgcolor;.comm;
        .mask,.fill{.comm;}
        .fill{
            background: @bgcolor1;
            transition:-webkit-transform @duration;
        }
        .left{
            clip:rect(0,@size/2,@size,0);
            .fill{clip:rect(0,@size,@size,@size/2);}
        }
        .right{
            clip:rect(0,@size,@size,@size/2);
            .fill{clip:rect(0,@size/2,@size,0);}
        }
    }
}

JavaScript

$('head style[type="text/css"]').attr('type', 'text/less');
less.refreshStyles();	
$(function(){
    var m=$(".fill"),el=$("#deg").val(60),cur=$("#cur");
    $("#start").click(function(){
        var deg=el.val()||60;
        m.css("transform","rotate("+deg+"deg)");
        cur.text(deg);
        el.val(Math.ceil(Math.random()*180));
    });
    $("#start").click();
});