Fijn

Status Circle component: Failed 

<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="#E95F59" />
        <rect x="11" y="12" width="1.41419" height="9.89935" rx="0.707096" transform="rotate(-45 11 12)" fill="white" />
        <rect x="18" y="11" width="1.41419" height="9.89935" rx="0.707097" transform="rotate(45 18 11)" 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="#E95F59"/>
        <rect x="11" y="12" width="1.41419" height="9.89935" rx="0.707096" transform="rotate(-45 11 12)" fill="white"/>
        <rect x="18" y="11" width="1.41419" height="9.89935" rx="0.707097" transform="rotate(45 18 11)" fill="white"/>
    </svg>
</div>
 
{
  "tooltip": false,
  "tooltip_html": "",
  "tooltip_trigger": "",
  "trigger": "hover",
  "popover_content": false,
  "progress": false
}
  • Handle: @status-circle--failed
  • Preview:
  • Filesystem Path: templates/fractal/atoms/status-circle/status-circle--failed.njk
  • Referenced by (1): @block

Progress

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