Jquery and CSS3 Circular Progress Bar

Question

Can you please take a look at This Demo and let me know how I can generate a simple progress bar using CSS3 and jQuery? I know there are some perfect jquery outside for Progress bars but I really like to learn this how to animate background color in circular moode!

I have CSS as:

ul {
    list-style-type:none;
}
.progressBar {
    -moz-border-radius: 50px/50px;
    -webkit-border-radius: 50px 50px;
    border-radius: 50px/50px;
    ;
    border:solid 15px #999;
    width:50px;
    height:50px;
    line-height: 50px;
    text-align: center;
}
.progressBar:hover {
    border:solid 15px #f00;
    -webkit-transition: background-color 1000ms linear;
    -moz-transition: background-color 1000ms linear;
    -o-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
    animation:animatecolor 5s;
    -webkit-animation:animatecolor 5s;
}
@keyframes animatecolor {
    from {
        border:solid 15px #999;
    }
    to {
        border:solid 15px #f00;
    }
}
@-webkit-keyframes animatecolor {
    from {
        border:solid 15px #999;
    }
    to {
        border:solid 15px #f00;
    }
}

HTML:

<div class="progressBar">%</div>
<br />
<ul>
    <li><input type="checkbox" id="25">25%</li>
    <li><input type="checkbox" id="50">50%</li>
    <li><input type="checkbox" id="75">75%</li>
</ul>

jQuery

$(document).ready(function () {
    $("#25").on("click", function () {
   //$('.progressBar').animate({ width: '20%' }, 10000);
    });
    $("#50").on("click", function () {

    });
    $("#75").on("click", function () {

    });
});

Thanks