mirror of
https://github.com/tabler/tabler.git
synced 2025-12-22 01:44:25 +04:00
21 lines
1.3 KiB
HTML
21 lines
1.3 KiB
HTML
{% assign percentage = include.value | replace: '%', '' | default: 38 %}
|
|
{% assign colors = include.colors | default: include.color | default: 'blue,red,green,yellow,dark' | split: ',' %}
|
|
<div class="progress{% if include['size'] %} progress-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.width %} style="width: {{ include.width }}"{% endif %}>
|
|
{% if include.indeterminate %}
|
|
<div class="progress-bar progress-bar-indeterminate{% if include.color %} bg-{{ include.color }}{% endif %}"></div>
|
|
{% elsif include.values %}
|
|
{% assign values = include.values | split: ',' %}
|
|
{% for value in values %}
|
|
<div class="progress-bar bg-{{ colors[forloop.index0] }}" style="width: {{ value }}%" role="progressbar" aria-valuenow="{{ value }}" aria-valuemin="0" aria-valuemax="100"></div>
|
|
{% endfor %}
|
|
{% else %}
|
|
<div class="progress-bar{% if include.color %} bg-{{ include.color }}{% endif %}" style="width: {{ percentage }}%" role="progressbar" aria-valuenow="{{ percentage }}" aria-valuemin="0" aria-valuemax="100" aria-label="{{ percentage }}% Complete">
|
|
{% if include.show-value %}
|
|
{{ percentage }}%
|
|
{% else %}
|
|
<span class="visually-hidden">{{ percentage }}% Complete</span>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|