HTML5 Canvas Animated Circle

HTML

<div class="skills">
    <ul>
        <li class="html"><span>75</span></li>
    </ul>
    <div class="canvas">
        <canvas id="canvas-html-bottom" class="bottom"></canvas>
        <canvas id="canvas-html"></canvas>
    </div>
</div>

CSS

.skills {
    font: 100%/1.2em sans-serif;
    position: relative;
}
.skills ul {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 5;
}

/* CSS Circles (Bottom Layer and Fallback) */
.skills ul li {
    border: 41px solid #CCC;
    border-radius: 206px;
    box-shadow: 0 1px 1px 1px rgba(0,0,0,0.6);
    color: #333;
    font-size: 1.8em;
    height: 123px;
    line-height: 123px;
    margin: 30px;
    padding: 0;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    width: 123px;
    z-index: 10;
}

/* Border Colors / Font Sizes */
.skills ul li.html { border-color: #CEC0D9; }

/* Inside Drop Shadow */
.skills ul li span {
    border-radius: 125px;
    box-shadow: inset 0 1px 1px 1px rgba(0,0,0,0.6);
    display: block;
}

/* Canvas */
.canvas { 
    left: 29px;
    position: absolute; 
    top: 0;
    z-index: 15;
}
canvas {
    display: block;
}
canvas#canvas-html, canvas#canvas-html-bottom {
    position: absolute;
    top: 0;
    z-index: 50;
}
canvas.bottom { z-index: 25; }

JavaScript

var j = jQuery.noConflict();
j(document).ready(function($){

// Draw the Background Canvas
myCanvas('canvas-html-bottom', '#CEC0D9');
function myCanvas(canvas, stroke) {
    var mycanvas = document.getElementById(canvas),
    context = mycanvas.getContext('2d');
    mycanvas.height = '210';
    mycanvas.width = '210';
    context.lineWidth = '42';
    context.beginPath();
    context.arc(104, 102, 82, 0, Math.PI * 2, false);
    context.strokeStyle = stroke;
    context.stroke();
}

// Draw the Foreground Canvas
setTimeout(function(){
    myAnimatedCanvas('canvas-html', -190, '#5F4673');
}, 750);
        
        
function myAnimatedCanvas(canvas, end, stroke) {

    var start = convertToRadians(120),
        angle = start,
        end = convertToRadians(end),
        endRound = end.toFixed(1),
        dimensions = 214,
        x = 104,
        y = 103,
        radius = 82,
        delay;

    canvasAngle();

    function convertToRadians(degrees) {
        return ((Math.PI/180) * degrees);
    }
            
    function drawCanvas(context) {
        context.arc(x, y, radius, angle, angle, false);
        context.strokeStyle = stroke;
        context.stroke();
        angle -= 0.1;
        angle = angle.toFixed(1);
        if(angle == endRound) { 
            clearInterval(delay);
            context.clearRect(0, 0, dimensions, dimensions);
            context.arc(x, y, radius, end, start, false);
            context.strokeStyle = stroke;
            context.stroke();
            return;
        }
    }

    function canvasAngle() {
        var thecanvas = document.getElementById(canvas),
            context = thecanvas.getContext('2d');
            thecanvas.height = dimensions;
            thecanvas.width = dimensions;
            context.lineWidth = '42';
            context.beginPath();
            delay = setInterval(function(){ drawCanvas(context); }, 15);
        }
    }
});