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

Spinner

rx.spinner

Offizielle Doku

Werkstattauftrag

Wenn man auf „Entwurf speichern“ klickt, soll sich während des Speicherns an der Stelle des Disketten-Icons ein Spinner drehen.

rx.spinner ist eine kreisende Anzeige, die meldet, dass gerade etwas läuft. Man nutzt sie, wenn unklar ist, wie lange es noch dauert. Weißt du, wie viel noch fehlt, ist rx.progress die bessere Wahl.

rx.spinner()

Props ausprobieren

Gibst du ein Kind hinein, erscheint der Spinner, solange loading an ist, und das Kind, sobald es aus ist.

Props ausprobieren

size

rx.spinner(rx.text("Content is ready"), size="2", loading=True)

Schaltest du loading aus, erscheint statt des Spinners das Kind (der Text). size reicht von "1" bis "3".

Prop	Werte	Standard	Verwendung
`size`	`"1"` `"2"` `"3"`	`"2"`	Größe
`loading`	`True` / `False`	`True`	An: Spinner, aus: das Kind wird gezeigt

Größe

size reicht von "1" bis "3". Neben Text passt du ihn an die Schriftgröße an.

rx.hstack(
    rx.spinner(size="1"),
    rx.spinner(size="2"),
    rx.spinner(size="3"),
    align="center",
    spacing="4",
)

Spinner im Button

Buttons haben eine eigene loading-Prop: Ist sie an, dreht sich ein Spinner statt des Texts, und der Button lässt sich nicht mehr klicken (erstes Beispiel). Bei einem Button mit Icon ersetzt du nur den Platz des Icons durch rx.spinner und sperrst den Button mit disabled – dann bleibt der Text stehen, und nur das Icon dreht sich (zweites). Wie beim dritten erscheint mit loading=False das umschlossene Icon unverändert.

rx.flex(
    rx.button("Bookmark", loading=True),
    rx.button(rx.spinner(loading=True), "Bookmark", disabled=True),
    rx.button(rx.spinner(rx.icon("bookmark"), loading=False), "Bookmark"),
    spacing="3",
    wrap="wrap",
)

Mit dem State ein- und ausschalten

Übergibst du loading einen State-Wert, ist der Spinner nur zu sehen, solange die Aufgabe läuft; danach erscheint an derselben Stelle das Ergebnis. Du musst dafür weder extra Platz freihalten noch rx.cond verwenden.

Loaded 0 times

import asyncio


class SpinnerLoadState(rx.State):
    loading: bool = False
    loads: int = 0

    @rx.event(background=True)
    async def load_result(self):
        async with self:
            if self.loading:
                return
            self.loading = True
        await asyncio.sleep(1.5)
        async with self:
            self.loading = False
            self.loads += 1


rx.hstack(
    rx.button("Load", on_click=SpinnerLoadState.load_result, variant="soft"),
    rx.spinner(rx.text("Loaded ", SpinnerLoadState.loads, " times"), loading=SpinnerLoadState.loading),
    spacing="4",
    align="center",
)

Auftrag erledigt

Während des Speicherns wird das Disketten-Icon zum Spinner und der Button gesperrt. Danach kehrt das Icon zurück, und ein „Saved“-Badge erscheint.

import asyncio


class SpinnerSaveState(rx.State):
    saving: bool = False
    saved: bool = False

    @rx.event(background=True)
    async def save_draft(self):
        async with self:
            if self.saving:
                return
            self.saving = True
            self.saved = False
        await asyncio.sleep(1.2)
        async with self:
            self.saving = False
            self.saved = True


rx.hstack(
    rx.button(
        rx.spinner(rx.icon("save"), loading=SpinnerSaveState.saving),
        "Save draft",
        on_click=SpinnerSaveState.save_draft,
        disabled=SpinnerSaveState.saving,
    ),
    rx.cond(SpinnerSaveState.saved, rx.badge("Saved", color_scheme="green")),
    spacing="3",
    align="center",
)

Werkstattnotizen

rx.spinner() zeigt ein Warten ohne absehbares Ende. Ist die Restmenge bekannt, rx.progress.
size "1" bis "3".
Umschließt er ein Kind, erscheint bei loading=True der Spinner, bei False das Kind.
Für den ganzen Button button(loading=True); soll sich nur das Icon drehen, das Icon mit rx.spinner umschließen.

← Zurück

Datenanzeige · Progress

Weiter →

Datenanzeige · Scroll Area

Ü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