<div class="a-statusCircle">
<svg class="a-statusCircle__svg -list" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="20.5" cy="20.5" r="16" fill="white" stroke="black" stroke-opacity="0.15" />
<path d="M20.5 4.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#69D2C2" ; stroke-width="2" ; stroke-dasharray="75, 100" stroke-linecap="round" />
<path d="M16.75 15H15.25C15.112 15 15 15.112 15 15.25V16.75C15 16.888 15.112 17 15.25 17H16.75C16.888 17 17 16.888 17 16.75V15.25C17 15.112 16.888 15 16.75 15Z" fill="black" />
<path d="M16.75 19.0001H15.25C15.112 19.0001 15 19.1121 15 19.2501V20.7501C15 20.8881 15.112 21.0001 15.25 21.0001H16.75C16.888 21.0001 17 20.8881 17 20.7501V19.2501C17 19.1121 16.888 19.0001 16.75 19.0001Z" fill="black" />
<path d="M16.75 22.9999H15.25C15.112 22.9999 15 23.1119 15 23.2499V24.7499C15 24.8879 15.112 24.9999 15.25 24.9999H16.75C16.888 24.9999 17 24.8879 17 24.7499V23.2499C17 23.1119 16.888 22.9999 16.75 22.9999Z" fill="black" />
<path d="M19.0002 16.4999H26.5002C26.7767 16.4999 27.0002 16.2764 27.0002 15.9999C27.0002 15.7234 26.7767 15.4999 26.5002 15.4999H19.0002C18.7237 15.4999 18.5002 15.7234 18.5002 15.9999C18.5002 16.2764 18.7237 16.4999 19.0002 16.4999Z" fill="black" />
<path d="M26.5002 19.5H19.0002C18.7237 19.5 18.5002 19.7235 18.5002 20C18.5002 20.2765 18.7237 20.5 19.0002 20.5H26.5002C26.7767 20.5 27.0002 20.2765 27.0002 20C27.0002 19.7235 26.7767 19.5 26.5002 19.5Z" fill="black" />
<path d="M26.5002 23.5001H19.0002C18.7237 23.5001 18.5002 23.7236 18.5002 24.0001C18.5002 24.2766 18.7237 24.5001 19.0002 24.5001H26.5002C26.7767 24.5001 27.0002 24.2766 27.0002 24.0001C27.0002 23.7236 26.7767 23.5001 26.5002 23.5001Z" fill="black" />
</svg>
</div>
<div class="a-statusCircle">
<svg class="a-statusCircle__svg -list" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="20.5" cy="20.5" r="16" fill="white" stroke="black" stroke-opacity="0.15"/>
<path
d="M20.5 4.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
fill="none"
stroke="#69D2C2";
stroke-width="2";
stroke-dasharray="75, 100"
stroke-linecap="round"
/>
<path d="M16.75 15H15.25C15.112 15 15 15.112 15 15.25V16.75C15 16.888 15.112 17 15.25 17H16.75C16.888 17 17 16.888 17 16.75V15.25C17 15.112 16.888 15 16.75 15Z" fill="black"/>
<path d="M16.75 19.0001H15.25C15.112 19.0001 15 19.1121 15 19.2501V20.7501C15 20.8881 15.112 21.0001 15.25 21.0001H16.75C16.888 21.0001 17 20.8881 17 20.7501V19.2501C17 19.1121 16.888 19.0001 16.75 19.0001Z" fill="black"/>
<path d="M16.75 22.9999H15.25C15.112 22.9999 15 23.1119 15 23.2499V24.7499C15 24.8879 15.112 24.9999 15.25 24.9999H16.75C16.888 24.9999 17 24.8879 17 24.7499V23.2499C17 23.1119 16.888 22.9999 16.75 22.9999Z" fill="black"/>
<path d="M19.0002 16.4999H26.5002C26.7767 16.4999 27.0002 16.2764 27.0002 15.9999C27.0002 15.7234 26.7767 15.4999 26.5002 15.4999H19.0002C18.7237 15.4999 18.5002 15.7234 18.5002 15.9999C18.5002 16.2764 18.7237 16.4999 19.0002 16.4999Z" fill="black"/>
<path d="M26.5002 19.5H19.0002C18.7237 19.5 18.5002 19.7235 18.5002 20C18.5002 20.2765 18.7237 20.5 19.0002 20.5H26.5002C26.7767 20.5 27.0002 20.2765 27.0002 20C27.0002 19.7235 26.7767 19.5 26.5002 19.5Z" fill="black"/>
<path d="M26.5002 23.5001H19.0002C18.7237 23.5001 18.5002 23.7236 18.5002 24.0001C18.5002 24.2766 18.7237 24.5001 19.0002 24.5001H26.5002C26.7767 24.5001 27.0002 24.2766 27.0002 24.0001C27.0002 23.7236 26.7767 23.5001 26.5002 23.5001Z" fill="black"/>
</svg>
</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.