Progress

Progress bar component for task completion.

template 0 required 6 optional 1 slot 1 a11y rule

Reference Guide

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
        self.max = 100
        self.label = 'Progress 25%'
my_template.html
django
{% load theme_components %}
{% theme_progress value=value max=max label=label %}

Props

NameTypeRequiredDefaultDescription
valueOptional[int]—Current progress value
maxint100Maximum value (default: 100)
labelstr—Optional label text displayed above the bar
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 973, 979, 985, 994, 1001. 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 %}
     {{ extra_attrs }}>
    {% 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>