Pie Timer with jQuery

Question

I need to achieve this:

and the closest plugins I found are:

• PieTimer
• TimeCircles

Here's a fiddle: http://jsfiddle.net/RsKR2/1/

$('#timer').pietimer({
    timerSeconds: 10,
    color: '#d00',
    fill: '#f00',
    showPercentage: true,
    callback: function() {
        // alert("yahoo, timer is done!");
        $('#timer').pietimer('reset');
    }
});

just not sure how to customize the circles/canvas to achieve the desired look.

Answer 1

Updated Fiddle

Edited some css property for desired results

#timer {
    margin: 20px;
    width: 80px;
    -moz-border-radius:0.7em; /* Newly added line */
    -webkit-border-radius:0.7em; /* Newly added line */
    border-radius:0.7em; /* Newly added line */
    border:2px solid #ccc; /* Newly added line */
}

.pietimer > .percent 
{
    position: absolute;
    top: 1.05em;
    left: 0;
    width: 3.33em;
    font-size: 0.3em;
    text-align:center;
    display: none;
    z-index:10; /* Newly added line */
    font-weight:bold; /* Newly added line */
}