<div class="bar">
<div class="percent">
<span style="width: 100%;"></span>
</div>
<div class="circle">
<span>0%</span>
</div>
<div class="text">
<input type="text" class="input" value="0" />
<small>Please change a value and hit the enter key.</small>
</div>
</div>  

.bar {
float:left;
clear:both;
width:100%;
height:40px;
position:relative;
}
   
.bar .percent {
background:#2caedd;
background:-moz-linear-gradient(left, #2caedd 0%, #86dd2a 28%, #e0d72a 46%, #e8902c 66%, #ed2d2d 86%, #ff0000 100%);
background:-webkit-gradient(linear, left top, right top, color-stop(0%,#2caedd), color-stop(28%,#86dd2a), color-stop(46%,#e0d72a), color-stop(66%,#e8902c), color-stop(86%,#ed2d2d), color-stop(100%,#ff0000));
background:-webkit-linear-gradient(left, #2caedd 0%,#86dd2a 28%,#e0d72a 46%,#e8902c 66%,#ed2d2d 86%,#ff0000 100%);
background:-o-linear-gradient(left, #2caedd 0%,#86dd2a 28%,#e0d72a 46%,#e8902c 66%,#ed2d2d 86%,#ff0000 100%);
background:-ms-linear-gradient(left, #2caedd 0%,#86dd2a 28%,#e0d72a 46%,#e8902c 66%,#ed2d2d 86%,#ff0000 100%);
background:linear-gradient(left, #2caedd 0%,#86dd2a 28%,#e0d72a 46%,#e8902c 66%,#ed2d2d 86%,#ff0000 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2caedd', endColorstr='#ff0000', GradientType=1);
float:left;
width:100%;
height:40px;
position:relative;
}
   
.bar .percent span {
display:block;
position:absolute;
top:0;
right:0;
z-index:2;
width:100%;
height:40px;
background:rgba(255, 255, 255, .7);
}
   
.bar .circle {
display:block;
position:absolute;
top:50%;
left:0;
z-index:3;
margin:-40px 0 0 -40px;
width:80px;
height:80px;
line-height:80px;
text-align:center;
font-size:20px;
font-family:'PT Sans Narrow', sans-serif;
color:#fff;
background:rgba(0, 0, 0, .1);
-moz-border-radius:40px;
-webkit-border-radius:40px;
border-radius:40px;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
}
   
.bar .circle.rotate {
-webkit-transform:rotate(1080deg);
-moz-transform:rotate(1080deg);
-o-transform:rotate(1080deg);
}
   
.bar .circle span {
display:inline-block;
width:70px;
height:70px;
line-height:70px;
background:rgba(0, 0, 0, .3);
-moz-border-radius:35px;
-webkit-border-radius:35px;
border-radius:35px;
}

$(function(){
var input = $('.input'),
bar = $('.bar'),
bw = bar.width(),
percent = bar.find('.percent'),
circle = bar.find('.circle'),
ps = percent.find('span'),
cs = circle.find('span'),
name = 'rotate';
input.on('keydown', function(e){
if (e.keyCode == 13){
var t = $(this), val = t.val();
if (val >=0 && val <= 100){
var w = 100-val, pw = (bw*w)/100,
pa = {
width: w+'%'
},
cw = (bw-pw)/2,
ca = {
left: cw
}
ps.animate(pa);
cs.text(val+'%');
circle.animate(ca, function(){
circle.removeClass(name)
}).addClass(name);  
} else {
alert('range: 0 - 100');
t.val('');
}
}
});
});