DIA Frontend

Progress 

<div class="progress" style="height: 2em" ;>
    <div class="progress-bar bg-info progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;">
        75%
    </div>
</div>
 
{% spaceless %}
    {% block main %}
        {% if height %}
            {% set attributeStyle = ' style="height: ' ~ height ~ '";' %}
        {% endif %}

        <div class="progress" {{ attributeStyle }}>
            {% for bar in bars %}
                {% set classes = [] %}

                {% if bar.bg %}
                    {% set classes = classes|merge([' bg-' ~ bar.bg]) %}
                {% endif %}

                {% if bar.striped %}
                    {% set classes = classes|merge([' progress-bar-striped']) %}
                {% endif %}

                {% if bar.animatedStripes %}
                    {% set classes =
                        classes|merge([' progress-bar-animated'])
                    %}
                {% endif %}

                <div class="progress-bar{{ classes|join }}"
                    role="progressbar"
                    aria-valuenow="{{ bar.progress }}"
                    aria-valuemin="0"
                    aria-valuemax="100"
                    style="width: {{ bar.progress }}%;">
                    {% if bar.label %}
                        {{ bar.progress }}%
                    {% endif %}
                </div>
            {% endfor %}
        </div>
    {% endblock %}
{% endspaceless %}
 
{
  "height": "2em",
  "bars": [
    {
      "progress": 75,
      "bg": "info",
      "label": true,
      "striped": true,
      "animatedStripes": true
    }
  ]
}

No notes defined.