Progress
LIVE PREVIEW 5
progress(value=25, max=100, label=Progress 25%)
progress(value=50, max=100, label=Progress 50%)
progress(value=75, max=100, label=Progress 75%)
progress(value=100, max=100, label=Progress 100%)
progress(value=None, max=100, label=Loading...)
USAGE
{%{% endverbatim %} load theme_components {% verbatim %}%}
{%{% endverbatim %} theme_{{ name }}{% for p in required_context %} {{ p.name }}{% endfor %}{% for p in optional_context %} {{ p.name }}={{ p.default|default:"..." }}{% endfor %} {% verbatim %}%}
PROPS — OPTIONAL 6
| Name | Type | Default |
|---|---|---|
value |
Optional[int] |
— |
max |
int |
100 |
label |
str |
— |
css_prefix |
str |
— |
attrs |
dict |
— |
slot_label |
str |
— |
ACCESSIBILITY 1
| Requirement | Element | Attribute | Value |
|---|---|---|---|
| Progress must have role=progressbar | div |
role |
progressbar |
AVAILABLE SLOTS 1
slot_label
CSS VARIABLES 3
--foreground
--muted
--primary
TEMPLATE SOURCE
<div class="{{ css_prefix }}progress-wrapper {% if attrs.class %}{{ attrs.class }}{% endif %}"
{% if attrs.id %}id="{{ attrs.id }}"{% endif %}>
{% if slot_label %}
{{ slot_label|safe }}
{% elif label %}
<div class="{{ css_prefix }}progress-label">{{ label }}</div>
{% endif %}
<div class="{{ css_prefix }}progress {% if is_indeterminate %}{{ css_prefix }}progress-indeterminate{% endif %}"
role="progressbar"
aria-valuemin="0"
aria-valuemax="{{ max }}"
{% if not is_indeterminate %}aria-valuenow="{{ value }}"{% endif %}
{% if label %}aria-label="{{ label }}"{% endif %}>
{% if not is_indeterminate %}
<div class="{{ css_prefix }}progress-bar" style="width: {{ percentage }}%"></div>
{% endif %}
</div>
</div>