express.ui.busy_indicators.options

express.ui.busy_indicators.options(
    spinner_type=None,
    spinner_color=None,
    spinner_size=None,
    spinner_delay=None,
    spinner_selector=None,
    fade_opacity=None,
    fade_selector=None,
    pulse_background=None,
    pulse_height=None,
    pulse_speed=None,
)

Customize spinning busy indicators.

Busy indicators provide a visual cue to users when the server is busy calculating outputs or otherwise performing tasks (e.g., producing downloads). This function allows you to customize the appearance of those busy indicators. To apply the customization, include the result of this function inside the app's UI.

Parameters

spinner_type : BusySpinnerType | Path | None = None: The type of spinner. Pre-bundled types are listed in the BusySpinnerType type. A Path to a local SVG file can also be provided. The SVG should adhere to the following rules: * The SVG itself should contain the animation. * It should avoid absolute sizes (the spinner’s containing DOM element size is set in CSS by spinner_size, so it should fill that container). * It should avoid setting absolute colors (the spinner’s containing DOM element color is set in CSS by spinner_color, so it should inherit that color).
spinner_color : str | None = None: The color of the spinner. This can be any valid CSS color. Defaults to the app’s “primary” color (if Bootstrap is on the page).
spinner_size : str | None = None: The size of the spinner. This can be any valid CSS size.
spinner_delay : str | None = None: The amount of time to wait before showing the spinner. This can be any valid CSS time and can useful for not showing the spinner if the computation finishes quickly.
spinner_selector : str | None = None: A character string containing a CSS selector for scoping the spinner customization. The default (None) will apply the spinner customization to the parent element of the spinner.
fade_opacity : float | None = None: The opacity (a number between 0 and 1) for recalculating output. Set to 1 to “disable” the fade.
fade_selector : str | None = None: A string containing a CSS selector for scoping the fade customization. The default (None) applies the fade customization to the parent element.
pulse_background : str | None = None: A CCS background definition for the pulse. The default uses a linear-gradient of the theme’s indigo, purple, and pink colors.
pulse_height : str | None = None: The height of the pulsing banner. This can be any valid CSS size.
pulse_speed : str | None = None: The speed of the pulsing banner. This can be any valid CSS time.

Examples

#| standalone: true
#| components: [editor, viewer]
#| layout: vertical
#| viewerHeight: 400

## file: app.py
import os
import time

import numpy as np
import seaborn as sns

from shiny.express import input, render, ui

ui.page_opts(title="Busy spinner demo")

with ui.sidebar():
    ui.input_selectize(
        "indicator_types",
        "Busy indicator types",
        ["spinners", "pulse"],
        multiple=True,
        selected=["spinners", "pulse"],
    )

    @render.download
    def download():
        time.sleep(3)
        path = os.path.join(os.path.dirname(__file__), "app-express.py")
        return path


with ui.card():
    ui.card_header(
        "Plot that takes a few seconds to render",
        ui.input_task_button("simulate", "Simulate"),
        class_="d-flex justify-content-between align-items-center",
    )

    @render.plot
    def plot():
        input.simulate()
        time.sleep(3)
        sns.lineplot(x=np.arange(100), y=np.random.randn(100))


ui.busy_indicators.options(spinner_type="bars3")


@render.ui
def indicator_types_ui():
    return ui.busy_indicators.use(
        spinners="spinners" in input.indicator_types(),
        pulse="pulse" in input.indicator_types(),
    )

express.ui.busy_indicators.options

Parameters

See Also

Examples