Fijn

Task monitor 

<div class="m-taskMonitor d-flex justify-content-start justify-content-md-end align-items-center">
     <div class="m-taskMonitor__tasks d-flex align-items-center">

         <div class="progress-wrap">

             <div class="a-statusCircle -large -progress" data-toggle="popover" data-html="true" data-trigger="hover" data-content="<div class=' d-inline-block'>Bestelling</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="25, 100" stroke-linecap="round" />
                     </svg>
                 </div>
                 <span class="d-flex align-items-center justify-content-center">16/64</span>
             </div>

         </div>

         <div class="ml-2 ml-md-3">
             <div class="progress-wrap">

                 <div class="a-statusCircle -large -progress" data-toggle="popover" data-html="true" data-trigger="hover" data-content="<div class=' d-inline-block'>Slagingskans</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="80, 100" stroke-linecap="round" />
                         </svg>
                     </div>
                     <span class="d-flex align-items-center justify-content-center">80%</span>
                 </div>

             </div>
         </div>

     </div>
 </div>
 
<div class="m-taskMonitor{% if completed %} -completed{% endif %} d-flex justify-content-start justify-content-md-end align-items-center">
    <div class="m-taskMonitor__tasks d-flex align-items-center">
        {% if completed %}{% set progress=100 %}{% set sublabel="64/64" %}{% endif %}
        {% set variant="" %}
        {% if completed %}{% set variant="--completed" %}{% endif %}
        {% if circle %}{% set variant="--circle" %}{% set progress="25" %}{% set tooltip_message="Bestelling" %}{% endif %}
        {% render '@progress'+variant, {progress:progress, sublabel:sublabel, completed:completed, tooltip_message:tooltip_message}, true %}
        {% if circle %}
            {% set circle_text="80%" %}
            {% set progress="80" %}
            {% set show_feedback=true %}
            {% set tooltip_message="Slagingskans" %}
            <div class="ml-2 ml-md-3">
                {% render '@progress'+variant, {progress:progress, circle_text:circle_text, show_feedback:show_feedback, tooltip_message:tooltip_message}, true %}
            </div>
        {% endif %}
        {% if completed %}
            <div class="ml-2 ml-sm-3 ml-md-4">
                {% render '@button', {text:"Naar fabriek sturen"}, true %}
            </div>
        {% endif %}
    </div>
</div>
 
{
  "completed": false,
  "circle": true
}

No notes defined.