<div class="a-statusCircle -large" data-toggle="popover" data-html="true" data-trigger="hover" data-content="<div class=' d-inline-block'>Voorontwerp Elkien V1</div>" data-placement="bottom">
<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="75, 100" stroke-linecap="round" />
<text x="50%" y="31" text-anchor="middle" class="a-statusCircle__text"></text>
</svg>
</div>
<div class="a-statusCircle -large" {% 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 %}>
<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="75, 100" stroke-linecap="round"/>
<text x="50%" y="31" text-anchor="middle" class="a-statusCircle__text">{{ circle_text }}</text>
</svg>
</div>
{
"tooltip": true,
"tooltip_html": "",
"tooltip_trigger": "",
"trigger": "hover",
"popover_content": false,
"progress": false,
"show_feedback": true,
"tooltip_message": "Voorontwerp Elkien V1"
}
Inside the stroke-dasharray="75, 100" attribute you can set the value of the desired percentage.