<div class="a-statusCircle -large">
<div class="a-statusCircle__progress">
<svg class="a-statusCircle__svg -list" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="27" cy="27" r="25" fill="white" stroke="black" stroke-opacity="0.15" />
<path d="M52 27C52 40.8071 40.8071 52 27 52C13.1929 52 2 40.8071 2 27C2 13.1929 13.1929 2 27 2C40.8071 2 52 13.1929 52 27Z" fill="none" stroke="#69D2C2" stroke-width="4" pathLength="100" stroke-dasharray="false, 100" stroke-linecap="round" />
</svg>
</div>
<span class="d-flex align-items-center justify-content-center"></span>
</div>
<div class="a-statusCircle -large{% if progress %} -progress{% endif %}" {% if invalid or valid or tooltip %}data-toggle="popover" data-html="true" data-trigger="hover" data-content="<div class='{% if tooltip_message %} d-inline-block{% endif %}'>{% if show_feedback %}{{tooltip_message}}{% endif %}</div>" data-placement="bottom"{% endif %}>
<div class="a-statusCircle__progress">
<svg class="a-statusCircle__svg -list" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="27" cy="27" r="25" fill="white" stroke="black" stroke-opacity="0.15"/>
<path
d="M52 27C52 40.8071 40.8071 52 27 52C13.1929 52 2 40.8071 2 27C2 13.1929 13.1929 2 27 2C40.8071 2 52 13.1929 52 27Z" fill="none" stroke="#69D2C2" stroke-width="4" pathLength="100" stroke-dasharray="{{ progress }}, 100" stroke-linecap="round"/>
</svg>
</div>
<span class="d-flex align-items-center justify-content-center">{{ circle_text }}</span>
</div>
{
"tooltip": false,
"tooltip_html": "",
"tooltip_trigger": "",
"trigger": "hover",
"popover_content": false,
"progress": false
}
Inside the stroke-dasharray="75, 100" attribute you can set the value of the desired percentage.