ReflexKR

Die Komponentenwerkstatt: Reflex' 100 Bibliotheksbausteine

Kursüberblick

Layout

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Typografie

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Formulare

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Datenanzeige

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Auf- und Zuklappen

Tabs

Accordion

Segmented Control

Overlays

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Dynamisches Rendern

Cond

Match

Foreach

Auto Scroll

Medien

Image

Audio

Video

Tabellen und Datengrids

Table

Data Table

Data Editor

Diagramme

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Diagrammbausteine

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Andere Diagrammbibliotheken

Plotly

Pyplot

HTML-Elemente

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Weitere Werkzeuge

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

Die Komponentenwerkstatt: Reflex' 100 Bibliotheksbausteine

Datenanzeige

Progress

rx.progress

Offizielle Doku

Werkstattauftrag

Zeig beim Hochladen einer Datei mit einem Balken an, wie viel Prozent schon geschafft sind, und färbe ihn am Ende grün.

rx.progress zeigt mit einem Balken, wie weit eine lange oder mehrstufige Aufgabe fortgeschritten ist. An value übergibst du einen Wert zwischen 0 und 100. Standardmäßig ist der Balken 100 % so breit wie sein Elternelement.

rx.vstack(
    rx.progress(value=0),
    rx.progress(value=50),
    rx.progress(value=100),
    width="50%",
)

Props ausprobieren

value und max nehmen nur ganze Zahlen an und fehlen deshalb auf dieser Werkbank. Ein Beispiel mit sich bewegendem Fortschritt findest du unten unter „Mit dem State bewegen“.

Props ausprobieren

size

variant

color

radius

high_contrast

rx.progress(value=60, size="2", variant="surface", color_scheme="indigo", radius="full", high_contrast=False)

size wählt die Dicke, variant die Form des Hintergrunds, color_scheme die Farbe.

Prop	Werte	Standard	Verwendung
`value`	Ganzzahl	keiner	Aktueller Fortschritt; ohne Angabe ein sich ständig bewegender Balken
`max`	Ganzzahl	`100`	Wert, bei dem der Balken voll ist
`size`	`"1"` `"2"` `"3"`	`"2"`	Dicke des Balkens
`variant`	`"classic"` `"surface"` `"soft"`	`"surface"`	Form des Hintergrunds
`color_scheme`	Radix-Farbname	Themenfarbe	Füllfarbe
`high_contrast`	`True` / `False`	`False`	Stärkerer Kontrast
`radius`	`"none"` `"small"` `"medium"` `"large"` `"full"`	Themenwert	Eckenrundung
`duration`	Zeitangabe wie `"5s"`	keiner	Füllzeit ohne value
`fill_color`	CSS-Farbe	keiner	Legt die Farbe des gefüllten Teils direkt fest

Schritte zählen mit max

Änderst du max, kannst du value in Schritten zählen. Schritt 3 von 5 ist value=3, max=5.

3 of 5 steps

rx.vstack(
    rx.text("3 of 5 steps"),
    rx.progress(value=3, max=5),
    width="50%",
)

Mit dem State bewegen

Um den Fortschritt zu ändern, übergibst du value einen State-Wert. Bewegst du den Slider, folgt der Balken.

30%

class ProgressSliderState(rx.State):
    value: int = 30

    @rx.event
    def set_progress_value(self, value: list[float]):
        self.value = int(value[0])


rx.vstack(
    rx.slider(default_value=[30], on_change=ProgressSliderState.set_progress_value),
    rx.progress(value=ProgressSliderState.value),
    rx.text(ProgressSliderState.value, "%"),
    width="50%",
)

Für Arbeiten, die wie echte Aufgaben Zeit brauchen, erhöhst du den Wert schrittweise in einem Hintergrund-Event (@rx.event(background=True)). Jede Änderung am State muss innerhalb von async with self: passieren, damit sie sofort an die Oberfläche geht. Dieses Beispiel erhöht alle 0,1 Sekunden um 5 und ist nach 2 Sekunden fertig; ein erneuter Klick während des Laufs wird ignoriert.

import asyncio


class ProgressLiveState(rx.State):
    value: int = 0
    running: bool = False

    @rx.event(background=True)
    async def start_progress(self):
        async with self:
            if self.running:
                return
            self.running = True
            self.value = 0
        while self.value < 100:
            await asyncio.sleep(0.1)
            async with self:
                self.value += 5
        async with self:
            self.running = False


rx.hstack(
    rx.progress(value=ProgressLiveState.value),
    rx.button("Start", on_click=ProgressLiveState.start_progress, loading=ProgressLiveState.running),
    width="60%",
    align="center",
)

Wenn der Wert unbekannt ist

Ohne value wird der Balken zu einer endlos hin und her laufenden Animation. Die nimmst du für Wartezeiten, bei denen unklar ist, wie viel noch fehlt. Mit duration tut der Balken so, als fülle er sich in dieser Zeit, und geht danach in die endlose Bewegung über.

No value: endless animation

duration="5s": fills in 5 seconds, then keeps moving

rx.vstack(
    rx.text("No value: endless animation", size="2"),
    rx.progress(),
    rx.text('duration="5s": fills in 5 seconds, then keeps moving', size="2"),
    rx.progress(duration="5s"),
    width="60%",
)

Die Füllfarbe selbst festlegen

fill_color legt die Farbe des gefüllten Teils direkt als CSS-Farbe fest. Das brauchst du für Farben, die nicht in der Liste der Radix-Farbnamen stehen.

rx.vstack(
    rx.progress(value=70, fill_color="orange"),
    rx.progress(value=40, fill_color="#2e8b57"),
    width="50%",
)

Auftrag erledigt

Ein Klick auf den Button lässt ein Hintergrund-Event in 10-%-Schritten hochzählen; ist der Balken voll, wird der Statustext zu „Done“ und der Balken grün. Tatsächlich wird keine Datei gesendet.

report.pdf

Ready

import asyncio


class ProgressUploadState(rx.State):
    percent: int = 0
    status: str = "Ready"

    @rx.event(background=True)
    async def send_files(self):
        async with self:
            if self.status == "Uploading...":
                return
            self.status = "Uploading..."
            self.percent = 0
        for _ in range(10):
            await asyncio.sleep(0.2)
            async with self:
                self.percent += 10
        async with self:
            self.status = "Done"


rx.card(
    rx.vstack(
        rx.hstack(rx.icon("upload"), rx.text("report.pdf", weight="bold"), rx.spacer(), rx.text(ProgressUploadState.percent, "%"), width="100%", align="center"),
        rx.progress(value=ProgressUploadState.percent, color_scheme=rx.cond(ProgressUploadState.status == "Done", "green", "indigo")),
        rx.hstack(
            rx.text(ProgressUploadState.status, size="2", color_scheme="gray"),
            rx.spacer(),
            rx.button("Upload", size="1", on_click=ProgressUploadState.send_files),
            width="100%",
            align="center",
        ),
        width="100%",
    ),
    max_width="360px",
)

Werkstattnotizen

rx.progress(value=…) ergibt einen Fortschrittsbalken von 0 bis 100; max ändert den Bezugswert.
State-Wert an value übergeben; lange Aufgaben im background-Event mit async with self hochzählen.
Ohne value läuft eine endlose Animation, mit duration füllt sich der Balken in dieser Zeit.
Aussehen über size · variant · color_scheme · radius · high_contrast, Füllfarbe über fill_color.

← Zurück

Datenanzeige · Code Block

Weiter →

Datenanzeige · Spinner

Über neue Lektionen informiert werden

Wir schicken dir eine E-Mail, wenn dieser Kurs neue Lektionen bekommt oder ein Folgekurs erscheint.

Fragen & Antworten

Frag alles zu dieser Lektion. Fragen aus allen Sprachversionen dieser Seite erscheinen hier gemeinsam.

ReflexKR

Python und Reflex zum Anfassen. Alle Beispiele wurden mit Reflex 0.10.0 ausgeführt und geprüft.

ReflexKR ist kostenlos und ohne Werbebanner. Wenn es dir geholfen hat, kannst du es mit einem Kaffee unterstützen. ☕ Spendier uns einen Kaffee

Hinweis zu Affiliate-Links

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex