Progress

Style-agnostic progress bar component using CSS custom properties.

template 0 required6 optional1 slot1 a11y rule

ReferenceGuide

Preview

Progress 25%
Progress 50%
Progress 75%
Progress 100%
Loading...

Usage

views.py
python
from djust import LiveView


class MyView(LiveView):
    template_name = "my_template.html"

    def mount(self, request, **kwargs):
        self.value = 25
my_template.html
django
{% load theme_components %}
{% theme_progress value=value max=100 label='Progress 25%' %}

Props

NameTypeRequiredDefault
valueOptional[int]—
maxint100
labelstr—
css_prefixstr—
attrsdict—
slot_labelstr—

Accessibility

RequirementElementAttributeValue
Progress must have role=progressbardivroleprogressbar

Slots

slot_label
Source & styles
FilePathNotes
templatedjust_theming/components/progress.htmlCopy it to the same path in your project, or per theme under djust_theming/themes/<theme>/components/.
cssdjust_theming/components.cssDefines 5 of this component's classes at line 904, 910, 916, 925, 932. Override those rules, or the custom properties they read, in a stylesheet loaded after it.
cssdjust_components/components.cssDefines 3 of this component's classes at line 129, 131, 136. Override those rules, or the custom properties they read, in a stylesheet loaded after it.
CSS variables
--foreground --muted --primary
Template source — progress.html
django
<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>