circle with progress SVG

circle with progress SVG

by pj_js15

HTML

<div class='container'>
    <div class='outer-circle'></div>
    <svg viewBox="0 0 32 32">
        <circle r="16" cx="16" cy="16" />
    </svg>
    <div class='text'>
        <span class='label-1'>STEP</span>
        <span class="label-2">1</span>
    </div>
</div>

CSS

* {
    font-family: Arial;
}

svg {
    border: 2px solid #662083;
    width: 65px;
    height: 65px;
    transform: rotate(-90deg);
    background: #D9E9C4;
    border-radius: 50%;
    position: absolute;
    top: 19px;
    left: 15px;
}

circle {
    fill: #D9E9C4;
    stroke: #89BC3B;
    stroke-width: 32;
    stroke-dasharray: 30 100;
    /* set percentage here */
}

.text {
    color: #662083;
    font-weight: bold;
    position: absolute;
    top: 33px;
    left: 37px;
}

.text > .label-1 {
    position: relative;
    font-size: 14px;
    left: -5px;
    top: -6px;
}

.text > .label-2 {
    display: block;
    font-size: 43px;
    position: relative;
    left: -1px;
    top: -13px;
}

.outer-circle {
    background: #89BC3B;
    border: 5px solid #662083;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-top: 0px;
    margin-left: -4px;
    position: relative;
}