ReflexKR

El taller de componentes: los 100 componentes de Reflex

Resumen del curso

Diseño

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Tipografía

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Formularios

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Visualización de datos

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Mostrar y ocultar

Tabs

Accordion

Segmented Control

Superposiciones

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Renderizado dinámico

Cond

Match

Foreach

Auto Scroll

Multimedia

Image

Audio

Video

Tablas y cuadrículas de datos

Table

Data Table

Data Editor

Gráficos

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Piezas de gráficos

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Otras bibliotecas de gráficos

Plotly

Pyplot

Elementos HTML

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Otras herramientas

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

El taller de componentes: los 100 componentes de Reflex

Visualización de datos

Spinner

rx.spinner

Documentación oficial

Pedido del taller

Al pulsar el botón «Guardar borrador», haz que un spinner gire en el lugar del icono del disquete mientras se guarda.

rx.spinner es un indicador giratorio que avisa de que hay una tarea en curso. Se usa cuando no se sabe cuánto falta. Si sabes cuánto queda, es mejor rx.progress.

rx.spinner()

Prueba las propiedades

Si le pones hijos, se ve el spinner mientras loading está activado y los hijos cuando se desactiva.

Prueba las propiedades

size

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

Si desactivas loading, en lugar del spinner se ve el hijo (el texto). size va de "1" a "3".

Propiedad	Valores	Por defecto	Uso
`size`	`"1"` `"2"` `"3"`	`"2"`	Tamaño
`loading`	`True` / `False`	`True`	Activado muestra el spinner; desactivado, los hijos

Tamaño

size va de "1" a "3". Junto a un texto, ajústalo al tamaño de la letra.

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

Spinner dentro de un botón

El botón tiene su propia propiedad loading: al activarla, gira un spinner en lugar del texto y no se puede pulsar (el primero). En un botón con icono, si sustituyes solo el hueco del icono por rx.spinner y bloqueas el botón con disabled, conservas el texto y solo gira el icono (el segundo). Como en el tercero, con loading=False se ve tal cual el icono envuelto.

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",
)

Activarlo con el State

Si pasas un valor del State a loading, el spinner solo se ve mientras la tarea está en marcha y, al acabar, el resultado aparece en ese mismo sitio. No hace falta reservar el hueco aparte ni usar rx.cond.

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",
)

Completar el pedido

Mientras se guarda, el icono del disquete se convierte en spinner y el botón se bloquea. Al terminar, vuelve el icono y aparece un badge "Saved".

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",
)

Notas del taller

rx.spinner() indica una espera de duración desconocida. Si sabes cuánto queda, rx.progress.
size de "1" a "3".
Si envuelve hijos, muestra el spinner mientras loading=True y los hijos con False.
Para cambiar todo el botón, button(loading=True); para que gire solo el icono, envuélvelo con rx.spinner.

← Anterior

Visualización de datos · Progress

Visualización de datos · Scroll Area

Recibe avisos de nuevas lecciones

Te avisaremos por correo cuando este curso tenga lecciones nuevas o se abra un curso de continuación.

Preguntas y respuestas

Pregunta lo que quieras sobre esta lección. Aquí se reúnen las preguntas de todas las versiones de idioma de esta página.

ReflexKR

Aprende Python y Reflex haciendo. Todos los ejemplos se ejecutaron y verificaron en Reflex 0.10.0.

ReflexKR es gratis y sin banners publicitarios. Si te ayudó, puedes apoyarlo con un café. ☕ Invítanos un café

Aviso de afiliados

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

Built with Reflex