jQuery addClass example

Change class name on click in jQuery

by modimayur

HTML

<div class="progress-radial" data-length="100" data-percent="15"></div>


<div class="progress-radial" data-length="100" data-percent="25"></div>


<div class="progress-radial" data-length="100" data-percent="45"></div>


<div class="progress-radial" data-length="100" data-percent="85"></div>

CSS

body {
    font-family:"Lato", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
}
.progress-radial {
    position:relative;
    margin:15px;
}
.progress-radial > svg {
    transform: rotate(-90deg);
}
.svg-circle {
    stroke-width: 15%;
    fill: transparent;
    transform: rotate(0.1deg);
    /* to fix Firefox */
}
.progress {
    stroke: crimson;
}
.cloak {
    stroke: #DEDEDE;
    stroke-width: 15.8%;
    border: 12px solid red;
}
.core {
    fill: #f7f7f7;
}
.progress-radial > .percent {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #666;
    transform: translate(-50%,-50%);
}

JavaScript

$(document).ready(function () {
	$('.progress-radial').each(function(){
		var progress = $(this);
    var cloak = progress.find(".cloak");
    var core = progress.find(".core");
    var length = progress.data("length");
    var percent = progress.data("percent");
    var font = (length/100)*33;
    var c = length/2;
    var r = c-((c/100)*20);
    var line1 = "<svg height="+length+" width="+length+">";
    var line2 = "<circle class='progress svg-circle' cx="+c+" cy="+c+"></circle>";
    var line3 = "<circle class='cloak svg-circle' cx="+c+" cy="+c+"></circle>";
    var line4 = "<circle class='core svg-circle' cx="+c+" cy="+c+"></circle>";
    var line5 = "</svg><div class='percent'></div>";
    
    progress.css({"height": length, "width": length});
    progress.html(line1+line2+line3+line4+line5);
    
    var width = progress.width();
    width = width - ((width / 100) * 20);
    
    var radius = r,
        circumference = 2 * radius * Math.PI;
    $(".p").html(width);
    $("circle").attr("stroke-dasharray", circumference + "px");
    $("circle").attr("r", radius + "px");

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

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

    progress.find(".cloak").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);
            $(".percent").css("font-size", font).html(now+"%");
        }
    });

});

});