Progress Bar Hilfsfunktionen

Die progress_bar Komponente visualisiert den Fortschritt von Hintergrundprozessen. Sie unterstützt statische Werte, Aktualisierungen durch Abfragen und vom Server gesendete Ereignisse.

WCAG AA
WCAG AAA

Funktionen

  • Aktualisierungsmodi: Statisch, Polling oder Server-Sent Events (SSE).

  • Wertanzeige: Optionaler Prozenttext.

  • Automatisch ausblenden: Wird nach dem Abschluss optional ausgeblendet.

  • Schaltfläche „Abbrechen“: Optionale Schaltfläche zum Abbrechen des Vorgangs.

  • Schaltfläche „Erneut versuchen“: Optionale Schaltfläche, welche bei einem Fehler angezeigt wird.

  • Dynamische Beschriftung: Die Beschriftung kann über eine JSON-Antwort aktualisiert werden.

HTML

Verwendung

Die Komponente wird über das progress_bar Tag eingebunden.

{% load insight_tags %} {% progress_bar config=progress_bar_config %} <!-- or --> {% progress_bar tag_id="download" value=66 %}

Parameter

Laden…

config (ProgressBarConfig oder als kwargs oder als Kombination aus beidem)

Dataclass für die Komponentenkonfiguration.

Name Typ Beschreibung Standardwert Erforderlich
tag_id str

Eindeutige ID für das Targeting mit JavaScript/CSS.

 "" False
label str

Optionale Überschrift/Bezeichnung für den Fortschrittsbalken.

 "" False
request_url str

URL zur Abfrage von Fortschrittsmeldungen. Erwartetes JSON: {"value": 75}.

 "" False
interval int

Abfrageintervall in Millisekunden.

 1000 False
sse_url str

URL für Server-Sent Events zur Anzeige von Fortschrittsmeldungen in Echtzeit.

 "" False
min_value int

Mindestwert.

 0 False
max_value int

Maximalwert.

 100 False
value int

Aktueller Fortschritt in Prozent.

 0 False
show_value bool

Ob der Wert als Text angezeigt werden soll.

 True False
hide_on_complete bool

Fortschrittsbalken ausblenden, sobald der maximale Wert erreicht wurde.

 False False
complete_delay int

Verzögerung in ms, bevor das Element nach Abschluss ausgeblendet wird.

 500 False
stop_on_error bool

Beende den Polling-Vorgang/SSE, sobald ein Fehler auftritt.

 False False
show_cancel bool

Zeige während des Vorgangs einen „Abbrechen“ Button an.

 False False
cancel_label str

Beschriftung für den „Abbrechen“ Button.

 "" False
cancel_url str

Optionale URL, die beim Abbrechen aufgerufen werden soll (POST-Request).

 "" False
show_retry bool

Zeige einen „Erneut versuchen“ Button an, wenn ein Fehler auftritt.

 False False
retry_label str

Beschriftung für den „Erneut versuchen“ Button.

 "" False
# Static progress bar ProgressBarConfig( tag_id="download", label="Download Progress", value=97, show_value=True, ) # Auto-updating via polling with cancel button ProgressBarConfig( tag_id="server-task", label="Processing...", request_url="/api/task/123/progress/", interval=500, show_cancel=True, cancel_url="/api/task/123/cancel/", ) # With retry on error ProgressBarConfig( tag_id="upload", label="Uploading...", request_url="/api/upload/progress/", show_retry=True, )

Barrierefreiheit

WCAG AA WCAG AAA
Status

WCAG AA (Grundlagen)

  • Die Fortschrittsanzeige verfügt über role='progressbar' sowie aria-valuenow, aria-valuemin und aria-valuemax.

  • Das Attribut aria-label beschreibt, was gerade passiert, sofern eine Beschriftung angegeben ist.

  • Das Attribut aria-valuetext liefert eine für Menschen lesbare Beschreibung des Fortschritts.

  • Ein Live-Bereich mit aria-live='polite' gibt Fortschrittsmeldungen an Screenreader weiter.

  • Fehlermeldungen verwenden role='alert', um sofort auf sie aufmerksam zu machen.

Verwandte Themen