ui.busy_indicators.options

ui.busy_indicators.options(spinner_type=None, spinner_color=None, spinner_size=None, spinner_delay=None, spinner_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.

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.

See Also

• use for enabling/disabling busy indicators.

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 import App, render, ui

app_ui = ui.page_sidebar(
    ui.sidebar(
        ui.input_selectize(
            "indicator_types",
            "Busy indicator types",
            ["spinners", "pulse"],
            multiple=True,
            selected=["spinners", "pulse"],
        ),
        ui.download_button("download", "Download source"),
    ),
    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",
        ),
        ui.output_plot("plot"),
    ),
    ui.busy_indicators.options(spinner_type="bars3"),
    ui.output_ui("indicator_types_ui"),
    title="Busy indicators demo",
)


def server(input):

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

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

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


app = App(app_ui, server)