http://designbored.herokuapp.com/#percent-icon

html_percent-icon.html

<input class="percent-selector" max="100" min="0" type="range" value="0">

<div class="cool-percent-icon">
  <div class="moar-outter-shadow"></div>
  <div class="outer-shadow"></div>
  <canvas height="100" width="100"></canvas>
  <div class="icon"><i class="icon-dropbox"></i></div>
</div>

<input class="percent-selector" max="100" min="0" type="range" value="0">

<div class="cool-percent-icon">
  <div class="moar-outter-shadow"></div>
  <div class="outer-shadow"></div>
  <canvas height="100" width="100"></canvas>
  <div class="icon"><span>100%</span></div>
</div>

js_percent-icon.js

function calculateAngle(percent){
  return (360*percent)/100
}
      
function calculateColor(percent){
  var r = Math.floor((255 * (100 -percent)) / 100),
      g = Math.floor((255 * percent) / 100),
      b = 0;

  return "rgb(" + r + "," + g + "," + b + ")"
}
      
$('.percent-selector').change(function(){
  selector = $(this)
  percent = selector.val()
  canvas = selector.next().children('canvas')[0]
  icon = selector.next().children('.icon').children('span')

  letsDraw(percent, canvas, icon)
});
      
function letsDraw(percent, canvas, icon){
  $(icon).text(percent + '%')

  context = canvas.getContext("2d");
  context.clearRect(0,0,400,400)
  drawSegment(canvas, context, calculateAngle(percent), calculateColor(percent));
}

function drawSegment(canvas, context, angle, color) {
  context.save();
  var centerX = Math.floor(canvas.width / 2);
  var centerY = Math.floor(canvas.height / 2);
  radius = Math.floor(canvas.width / 2);

  var startingAngle = degreesToRadians(-90);
  var arcSize = degreesToRadians(angle);
  var endingAngle = startingAngle + arcSize;

  context.beginPath();
  context.moveTo(centerX, centerY);
  context.arc(centerX, centerY, radius, 
                    startingAngle, endingAngle, false);
  context.closePath();

  context.fillStyle = color
  context.fill();

  context.restore();
}
      
function degreesToRadians(degrees) {
  return (degrees * Math.PI)/180;
}

style_perceint-icon.sass

.cool-percent-icon
  position: relative
  width: 100px
  height: 100px
  +border-radius(50px)
  background-color: #666
  margin: 20px

  canvas
    position: absolute
    top: 0
    left: 0
    z-index: 10

  .icon
    +box-shadow(#333 0 0 5px, #888 0 -1px 7px inset)
    position: absolute
    top: 10px
    left: 10px
    width: 80px
    height: 80px
    +border-radius(40px)
    background-color: white
    text-align: center
    z-index: 90
    i, span
      line-height: 80px
      +text-shadow(rgba(0,0,0,0.5) 0 -1px 0)
      color: #aaa
    i
      font-size: 32px
    span
      font-size: 22px

  .outer-shadow
    position: absolute
    top: 0
    bot: 0
    +border-radius(50px)
    width: 100px
    height: 100px
    +box-shadow(#333 0 0 10px inset)
    z-index: 100

  .moar-outter-shadow
    position: absolute
    top: -7px
    left: -7px
    height: 114px
    width: 114px
    +box-shadow(#999 0px 6px 14px inset)
    +border-radius(57px)
    z-index: 95

style_percent-icon.css

.cool-percent-icon {
  position: relative;
  width: 100px;
  height: 100px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
  border-radius: 50px;
  background-color: #666666;
  margin: 20px;
}
.cool-percent-icon canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
.cool-percent-icon .icon {
  -webkit-box-shadow: 0px 0px 5px #333333;
  -moz-box-shadow: 0px 0px 5px #333333;
  box-shadow: 0px 0px 5px #333333;
  -webkit-box-shadow: #333333 0 0 5px, #888888 0 -1px 7px inset;
  -moz-box-shadow: #333333 0 0 5px, #888888 0 -1px 7px inset;
  box-shadow: #333333 0 0 5px, #888888 0 -1px 7px inset;
  position: absolute;
  top: 10px;
  left: 10px;
  width: 80px;
  height: 80px;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  -ms-border-radius: 40px;
  -o-border-radius: 40px;
  border-radius: 40px;
  background-color: white;
  text-align: center;
  z-index: 90;
}
.cool-percent-icon .icon i, .cool-percent-icon .icon span {
  line-height: 80px;
  text-shadow: rgba(0, 0, 0, 0.5) 0 -1px 0;
  color: #aaaaaa;
  font-size: 22px;
}
cool-percent-icon .icon span {
  font-size: 22px;
}
.cool-percent-icon .icon i {
  font-size: 32px;
}
.cool-percent-icon .outer-shadow {
  position: absolute;
  top: 0;
  bot: 0;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
  border-radius: 50px;
  width: 100px;
  height: 100px;
  -webkit-box-shadow: #333333 0 0 10px inset;
  -moz-box-shadow: #333333 0 0 10px inset;
  box-shadow: #333333 0 0 10px inset;
  z-index: 100;
}
.cool-percent-icon .moar-outter-shadow {
  position: absolute;
  top: -7px;
  left: -7px;
  height: 114px;
  width: 114px;
  -webkit-box-shadow: #999999 0px 6px 14px inset;
  -moz-box-shadow: #999999 0px 6px 14px inset;
  box-shadow: #999999 0px 6px 14px inset;
  -webkit-border-radius: 57px;
  -moz-border-radius: 57px;
  -ms-border-radius: 57px;
  -o-border-radius: 57px;
  border-radius: 57px;
  z-index: 95;
}