Fijn

Progress component: Circle 

<div class="progress-wrap">

    <div class="a-statusCircle -large -progress" data-toggle="popover" data-html="true" data-trigger="hover" data-content="<div class=''></div>" data-placement="bottom">
        <div class="a-statusCircle__progress">
            <svg class="a-statusCircle__svg -list" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="27" cy="27" r="25" fill="white" stroke="black" stroke-opacity="0.15" />
                <path d="M52 27C52 40.8071 40.8071 52 27 52C13.1929 52 2 40.8071 2 27C2 13.1929 13.1929 2 27 2C40.8071 2 52 13.1929 52 27Z" fill="none" stroke="#69D2C2" stroke-width="4" pathLength="100" stroke-dasharray="48, 100" stroke-linecap="round" />
            </svg>
        </div>
        <span class="d-flex align-items-center justify-content-center">16/64</span>
    </div>

</div>
 
<div class="progress-wrap">
    {% if label %}<{% if small %}div{% else %}strong{% endif %} class="progress-label d-block">{{label}} {% if label_suffix %}<span class="font-weight-normal">{{label_suffix}}</span>{% endif %}</{% if small %}div{% else %}strong{% endif %}>{% endif %}
    {% if complete == false %}
        {% if circle %}
            {% render '@status-circle--progress', {circle_text:circle_text, tooltip:true, show_feedback:true, tooltip_message:tooltip_message, progress:progress}, true %}
        {% else %}
            <div class="progress{% if small %} -small{% endif %}{% if medium %} -medium{% endif %} mt-1 mb-1">
                <div class="progress-bar" role="progressbar" style="width: {{progress}}%" aria-valuenow="{{progress}}" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        {% endif %}
    {% endif %}
    {% if sublabel %}<div class="text-muted limit-lines-1">{{sublabel}}</div>{% endif %}
</div>
 
{
  "progress": 48,
  "label": "",
  "label_suffix": "",
  "sublabel": "",
  "small": false,
  "medium": false,
  "complete": false,
  "circle": true,
  "circle_text": "16/64"
}

No notes defined.