Fijn

Status Circle component: Started 

<div class="a-statusCircle">
    <svg class="a-statusCircle__svg" width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="15" cy="15" r="14" fill="white" stroke="#69D2C2" stroke-width="2" />
        <path d="M18.7907 12.1393C18.5306 11.9029 18.1262 11.9214 17.8885 12.1827L13.9911 16.4744L12.1082 14.5602C11.8597 14.3084 11.4559 14.3046 11.2048 14.5525C10.953 14.7998 10.9492 15.2042 11.1971 15.4559L13.5541 17.8519C13.6748 17.9746 13.8384 18.0429 14.0096 18.0429C14.0134 18.0429 14.0179 18.0429 14.0218 18.0436C14.1981 18.0397 14.3642 17.9643 14.4824 17.834L18.8341 13.0421C19.0712 12.7801 19.052 12.3763 18.7907 12.1393Z" fill="black" />
    </svg>
</div>
 
<div class="a-statusCircle">    
    <svg class="a-statusCircle__svg" width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="15" cy="15" r="14" fill="white" stroke="#69D2C2" stroke-width="2"/>
        <path d="M18.7907 12.1393C18.5306 11.9029 18.1262 11.9214 17.8885 12.1827L13.9911 16.4744L12.1082 14.5602C11.8597 14.3084 11.4559 14.3046 11.2048 14.5525C10.953 14.7998 10.9492 15.2042 11.1971 15.4559L13.5541 17.8519C13.6748 17.9746 13.8384 18.0429 14.0096 18.0429C14.0134 18.0429 14.0179 18.0429 14.0218 18.0436C14.1981 18.0397 14.3642 17.9643 14.4824 17.834L18.8341 13.0421C19.0712 12.7801 19.052 12.3763 18.7907 12.1393Z" fill="black"/>
    </svg>
</div>
 
{
  "tooltip": false,
  "tooltip_html": "",
  "tooltip_trigger": "",
  "trigger": "hover",
  "popover_content": false,
  "progress": false
}
  • Handle: @status-circle--started
  • Preview:
  • Filesystem Path: templates/fractal/atoms/status-circle/status-circle--started.njk
  • Referenced by (1): @block

Progress

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