Radial Progress v2.0

by surfine

HTML

<div class="progress-radial">
    <svg height="200px" width="200px">
        <circle class="progress svg-circle" cx="100" cy="100"></circle>
        <circle class="core svg-circle" cx="100" cy="100"></circle>
    </svg>
    <div class="p"></div>
</div>

CSS

body {
    font-family:"Lato", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
}
.progress-radial > svg {
    transform: rotate(-90deg);
}
.svg-circle {
    stroke-width: 15px;
    fill: transparent;
    transform: rotate(0.1deg);
    // to fix Firefox
}
.progress {
    stroke: crimson;
}
.core {
    stroke: #DEDEDE;
    stroke-width: 16px;
    border: 12px solid red;
}
.p {
    width: 5em;
}

JavaScript

$(document).ready(function () {
    var width = $(".radial-progress").width();
    width = width - ((width / 100) * 20);
    var radius = 60,
        circumference = 2 * radius * Math.PI;
    $(".p").html(width);
    $("circle").attr("stroke-dasharray", circumference + "px");
    $("circle").attr("r", radius + "px");

    $(".core").attr("r", (radius - 0.01 + "px"));

    var value = -80;
    value = value / 100;
    var offset = circumference * value;

    $(".core")
        .animate({
        x: offset
    }, {
        duration: 1000,
        step: function (now) {
            var p = (now / circumference) * 100;
            $(this).attr("stroke-dashoffset", now + "px");
            now = Math.abs(p).toFixed(0);
            $(".p").html(now+"%");
        }
    });

});