Fijn

Status Circle component: Done 

<div class="a-statusCircle">
    <svg class="a-statusCircle__svg" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="15" cy="15" r="15" fill="#69D2C2" />
        <path d="M18.7908 12.1395C18.5308 11.9031 18.1263 11.9216 17.8887 12.1829L13.9912 16.4745L12.1083 14.5604C11.8598 14.3086 11.456 14.3048 11.2049 14.5527C10.9532 14.7999 10.9493 15.2044 11.1972 15.4561L13.5542 17.8521C13.675 17.9747 13.8385 18.0431 14.0097 18.0431C14.0136 18.0431 14.018 18.0431 14.0219 18.0438C14.1982 18.0399 14.3643 17.9645 14.4825 17.8342L18.8342 13.0423C19.0713 12.7803 19.0521 12.3765 18.7908 12.1395Z" fill="white" />
    </svg>
</div>
 
<div class="a-statusCircle">
    <svg class="a-statusCircle__svg" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="15" cy="15" r="15" fill="#69D2C2"/>
        <path d="M18.7908 12.1395C18.5308 11.9031 18.1263 11.9216 17.8887 12.1829L13.9912 16.4745L12.1083 14.5604C11.8598 14.3086 11.456 14.3048 11.2049 14.5527C10.9532 14.7999 10.9493 15.2044 11.1972 15.4561L13.5542 17.8521C13.675 17.9747 13.8385 18.0431 14.0097 18.0431C14.0136 18.0431 14.018 18.0431 14.0219 18.0438C14.1982 18.0399 14.3643 17.9645 14.4825 17.8342L18.8342 13.0423C19.0713 12.7803 19.0521 12.3765 18.7908 12.1395Z" fill="white"/>
    </svg>
</div>
 
{
  "tooltip": false,
  "tooltip_html": "",
  "tooltip_trigger": "",
  "trigger": "hover",
  "popover_content": false,
  "progress": false
}

Progress

Inside the stroke-dasharray="75, 100" attribute you can set the value of the desired percentage.