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 byspinner_size
, so it should fill that container). * It should avoid setting absolute colors (the spinner’s containing DOM element color is set in CSS byspinner_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.
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.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(),
)