<div id="demo"></div>

    .proj-title {
        text-align: center;
    }
    
    .outer-circle {
        height: 200px;
        width: 200px; 
        border-radius: 50%;
        background-color: #E65962;
        background-image: linear-gradient(91deg, transparent 50%, #dadada 50%), linear-gradient(90deg, #dadada 50%, transparent 50%);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .circle {
        height: 100px; 
        width: 100px; 
        transform: scale(1.5);
        position: relative;
        text-align: center;
        border-radius: 100%;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        font-weight: bold;
    }
    
    #demo {
        margin-top: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    var totalCount = 60; // Ending number
    var count = 0; // Starting number
    var percent, degs;
    
    function displayCircle() {
        var demo = document.getElementById('demo');
        demo.innerHTML = `
        <div class="o-circle">
            <div id="outer-circle" class="outer-circle" style="background-image: ${getBar(percent)}" >
                <div class="circle">${percent}%</div>
            </div>
        </div>`;
    }
    
    var startTimer = setInterval(() => {
        if(count == totalCount) {
            clearInterval(startTimer);
        }
        percent = Math.round(count / totalCount * 100);
        count += 1;
        displayCircle()
    }, 60);
    
    function getBar(perc) {
        degs = perc / 100 * 360;
        if (degs <= 180) {
            return `linear-gradient(${90 + degs}deg, transparent 50%, #E2E8F0  50%),linear-gradient(90deg, #E2E8F0 50%, transparent 50%);`;
        } else {
            return `linear-gradient(${degs - 90}deg, transparent 50%, #E65962  50%),linear-gradient(90deg, #E2E8F0 50%, transparent 50%);`;
        }
    }