Fijn

Status Circle component: List 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="M10.75 10H9.25C9.112 10 9 10.112 9 10.25V11.75C9 11.888 9.112 12 9.25 12H10.75C10.888 12 11 11.888 11 11.75V10.25C11 10.112 10.888 10 10.75 10Z" fill="white" />
        <path d="M10.75 14H9.25C9.112 14 9 14.112 9 14.25V15.75C9 15.888 9.112 16 9.25 16H10.75C10.888 16 11 15.888 11 15.75V14.25C11 14.112 10.888 14 10.75 14Z" fill="white" />
        <path d="M10.75 18H9.25C9.112 18 9 18.112 9 18.25V19.75C9 19.888 9.112 20 9.25 20H10.75C10.888 20 11 19.888 11 19.75V18.25C11 18.112 10.888 18 10.75 18Z" fill="white" />
        <path d="M13 11.5H20.5C20.7765 11.5 21 11.2765 21 11C21 10.7235 20.7765 10.5 20.5 10.5H13C12.7235 10.5 12.5 10.7235 12.5 11C12.5 11.2765 12.7235 11.5 13 11.5Z" fill="white" />
        <path d="M20.5 14.5H13C12.7235 14.5 12.5 14.7235 12.5 15C12.5 15.2765 12.7235 15.5 13 15.5H20.5C20.7765 15.5 21 15.2765 21 15C21 14.7235 20.7765 14.5 20.5 14.5Z" fill="white" />
        <path d="M20.5 18.5H13C12.7235 18.5 12.5 18.7235 12.5 19C12.5 19.2765 12.7235 19.5 13 19.5H20.5C20.7765 19.5 21 19.2765 21 19C21 18.7235 20.7765 18.5 20.5 18.5Z" 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="M10.75 10H9.25C9.112 10 9 10.112 9 10.25V11.75C9 11.888 9.112 12 9.25 12H10.75C10.888 12 11 11.888 11 11.75V10.25C11 10.112 10.888 10 10.75 10Z" fill="white"/>
  <path d="M10.75 14H9.25C9.112 14 9 14.112 9 14.25V15.75C9 15.888 9.112 16 9.25 16H10.75C10.888 16 11 15.888 11 15.75V14.25C11 14.112 10.888 14 10.75 14Z" fill="white"/>
  <path d="M10.75 18H9.25C9.112 18 9 18.112 9 18.25V19.75C9 19.888 9.112 20 9.25 20H10.75C10.888 20 11 19.888 11 19.75V18.25C11 18.112 10.888 18 10.75 18Z" fill="white"/>
  <path d="M13 11.5H20.5C20.7765 11.5 21 11.2765 21 11C21 10.7235 20.7765 10.5 20.5 10.5H13C12.7235 10.5 12.5 10.7235 12.5 11C12.5 11.2765 12.7235 11.5 13 11.5Z" fill="white"/>
  <path d="M20.5 14.5H13C12.7235 14.5 12.5 14.7235 12.5 15C12.5 15.2765 12.7235 15.5 13 15.5H20.5C20.7765 15.5 21 15.2765 21 15C21 14.7235 20.7765 14.5 20.5 14.5Z" fill="white"/>
  <path d="M20.5 18.5H13C12.7235 18.5 12.5 18.7235 12.5 19C12.5 19.2765 12.7235 19.5 13 19.5H20.5C20.7765 19.5 21 19.2765 21 19C21 18.7235 20.7765 18.5 20.5 18.5Z" fill="white"/>
  </svg>
</div>
 
{
  "tooltip": false,
  "tooltip_html": "",
  "tooltip_trigger": "",
  "trigger": "hover",
  "popover_content": false,
  "progress": false
}
  • Handle: @status-circle--list-done
  • Preview:
  • Filesystem Path: templates/fractal/atoms/status-circle/status-circle--list-done.njk
  • Referenced by (1): @block

Progress

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