• HTML
• CSS
• JS

HTML

<div class="percent correct">
    <svg>
        <circle cx="40" cy="40" r="40"></circle>
        <circle cx="40" cy="40" r="40"></circle>
    </svg>
    
    <div class="number">80%</div>
    <div class="text">CORRECTA</div>
</div>

<div class="percent error" percent=40>
    <svg>
        <circle cx="40" cy="40" r="40"></circle>
        <circle cx="40" cy="40" r="40"></circle>
    </svg>
    
    <div class="number">20%</div>
    <div class="text">INCORRECTA</div>
</div>

CSS

body{
    font-family:arial;
}
.percent{
    position:relative;
    display:inline-block;
}
.percent svg {
    width:95px;
    height:95px;
}
.percent svg circle{
    fill:none;
    stroke:blue;
    stroke-width:14;
    transform:translate(7px,7px);
    stroke-dasharray:251;
    stroke-dashoffset:251;
    transition:0.6s all;
}
.percent .number{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    font-size:1.4rem;
    font-weight:700;
    color:#999;
}
.percent .text{
    position:absolute;
    bottom:-1.5rem;
    left:50%;
    transform:translateX(-50%);
    font-size:0.9rem;
    font-weight:600;
    color:#333;
}

.percent svg circle:nth-child(1){
    stroke-dashoffset:0;
}
.percent.correct svg circle:nth-child(1){
    stroke:#abebc6;
}
.percent.correct svg circle:nth-child(2){
    stroke:#2ecc71;
}
.percent.error svg circle:nth-child(1){
    stroke:#f5b7b1;
}
.percent.error svg circle:nth-child(2){
    stroke:#e74c3c;
}

JS

function porcent(){
    $(".percent").each(function(){
       $(".percent.correct svg circle:nth-child(2)").css("stroke-dashoffset","calc(251 - (251 * 60) / 100)");
       $(".percent.error svg circle:nth-child(2)").css("stroke-dashoffset","calc(251 - (251 * 40) / 100)");
    });
}

$(function(){ porcent(); });