Fijn

Progress component: Medium 

<div class="progress-wrap">
    <strong class="progress-label d-block">Offerte </strong>

    <div class="progress -medium mt-1 mb-1">
        <div class="progress-bar" role="progressbar" style="width: 12.5%" aria-valuenow="12.5" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

    <div class="text-muted limit-lines-1">32/64</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": 12.5,
  "label": "Offerte",
  "label_suffix": "",
  "sublabel": "32/64",
  "small": false,
  "medium": true,
  "complete": false,
  "circle": false,
  "circle_text": ""
}

No notes defined.