Replace the stroke-dasharray value in the SVG with the percent progress out of 100. Currently set to 60.

You can do it dynamically with JS.

Copy Code 


<svg viewBox="0 0 36 36" class="circular-chart">
    <path class="circle" style="stroke: #28fa65;"
        stroke-dasharray="60, 100"
        d="M18 2.0845
        a 15.9155 15.9155 0 0 1 0 31.831
        a 15.9155 15.9155 0 0 1 0 -31.831"
    />
</svg>
Copy Code 


.circular-chart {
    display: block;
    margin: auto;
    width: 100%;
    height: 100%;
    }
    
    .circle {
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    animation: progress 1s ease-out forwards;
    }
    
    @keyframes progress {
    0% {
        stroke-dasharray: 0 100;
    }
}

 

Topics: CSS, HTML