When busy indicators are enabled (see useBusyIndicators()), a spinner is shown on each calculating/recalculating output, and a pulsing banner is shown at the top of the page when the app is otherwise busy. 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.

busyIndicatorOptions(
  ...,
  spinner_type = NULL,
  spinner_color = NULL,
  spinner_size = NULL,
  spinner_delay = NULL,
  spinner_selector = NULL,
  pulse_background = NULL,
  pulse_height = NULL,
  pulse_speed = NULL
)

Arguments

...

Currently ignored.

spinner_type

The type of spinner. Pre-bundled types include: 'ring', 'ring2', 'ring3', 'bars', 'bars2', 'bars3', 'pulse', 'pulse2', 'pulse3', 'dots', 'dots2', 'dots3'.

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

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

The size of the spinner. This can be any valid CSS size.

spinner_delay

The amount of time to wait before showing the spinner. This can be any valid CSS time and can be useful for not showing the spinner if the computation finishes quickly.

spinner_selector

A character string containing a CSS selector for scoping the spinner customization. The default (NULL) will apply the spinner customization to the parent element of the spinner.

pulse_background

A CSS background definition for the pulse. The default uses a linear-gradient of the theme's indigo, purple, and pink colors.

pulse_height

The height of the pulsing banner. This can be any valid CSS size.

pulse_speed

The speed of the pulsing banner. This can be any valid CSS time.

See also

useBusyIndicators() for enabling/disabling busy indicators.

Examples

if (FALSE) { # rlang::is_interactive()

library(bslib)

card_ui <- function(id, spinner_type = id) {
  card(
    busyIndicatorOptions(spinner_type = spinner_type),
    card_header(paste("Spinner:", spinner_type)),
    plotOutput(shiny::NS(id, "plot"))
  )
}

card_server <- function(id, simulate = reactive()) {
  moduleServer(
    id = id,
    function(input, output, session) {
      output$plot <- renderPlot({
        Sys.sleep(1)
        simulate()
        plot(x = rnorm(100), y = rnorm(100))
      })
    }
  )
}

ui <- page_fillable(
  useBusyIndicators(),
  input_task_button("simulate", "Simulate", icon = icon("refresh")),
  layout_columns(
    card_ui("ring"),
    card_ui("bars"),
    card_ui("dots"),
    card_ui("pulse"),
    col_widths = 6
  )
)

server <- function(input, output, session) {
  simulate <- reactive(input$simulate)
  card_server("ring", simulate)
  card_server("bars", simulate)
  card_server("dots", simulate)
  card_server("pulse", simulate)
}

shinyApp(ui, server)
}