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

This is the {% theme_progress %} tag, which follows your theme. The Progress Python class (from djust.components import Progress) renders the same component unstyled: no stylesheet djust ships has a rule for its dj-progress classes, so you style it yourself — its docstring lists them.

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>