<canvas class="process" width="48px" height="48px">15%</canvas>

<script type="text/javascript"> drawProcess()function drawProcess() {    $(‘canvas.process‘).each(function() {        var text = $.trim($(this).text());        var process = text.substring(0, text.length - 1);        var canvas = this;        var context = canvas.getContext(‘2d‘);        context.clearRect(0, 0, 48, 48);        context.beginPath();        context.moveTo(24, 24);        context.arc(24, 24, 24, 0, Math.PI * 2, false);        context.closePath();        context.fillStyle = ‘#ddd‘;        context.fill();        context.beginPath();        context.moveTo(24, 24);        context.arc(24, 24, 24, 0, Math.PI * 2 * process / 100, false);        context.closePath();        context.fillStyle = ‘#e74c3c‘;        context.fill();        context.beginPath();        context.moveTo(24, 24);        context.arc(24, 24, 21, 0, Math.PI * 2, true);        context.closePath();        context.fillStyle = ‘rgba(255,255,255,1)‘;        context.fill();        //context.beginPath();        //context.arc(24, 24, 18.5, 0, Math.PI * 2, true);        //context.closePath();        //context.strokeStyle = ‘#ddd‘;        //context.stroke();        //context.font = "bold 9pt Arial";        //context.fillStyle = ‘#e74c3c‘;        //context.textAlign = ‘center‘;        //context.textBaseline = ‘middle‘;        //context.moveTo(24, 24);        //context.fillText(text, 24, 24)    })}</script>