progress_circle_bar.html

<div class="circle-progress">
    <svg>
        <circle cx="50" cy="50" r="40"></circle>
        <circle cx="50" cy="50" r="40" class="progress"></circle>
    </svg>
    <span>75%</span>
</div>

<style>
    .circle-progress {
        width: 100px;
        height: 100px;
        position: relative;
    }

    svg {
        width: 100px;
        height: 100px;
        transform: rotate(-90deg);
    }

    circle {
        fill: none;
        stroke-width: 8;
        stroke: #ddd;
    }

    .progress {
        stroke: #4caf50;
        stroke-dasharray: 251;
        stroke-dashoffset: calc(251 - (251 * 75) / 100);
        transition: stroke-dashoffset 1s ease-in-out;
    }

    .circle-progress span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 16px;
        font-weight: bold;
    }
</style>