When a 'Shiny' output (such as a plot, table, map, etc.) is recalculating, it remains visible but gets greyed out. Using 'shinycssloaders', you can add a loading animation ("spinner") to outputs instead. By wrapping a 'Shiny' output in 'withSpinner()', a spinner will automatically appear while the output is recalculating. See the demo online at < https://daattali.com/shiny/shinycssloaders-demo/>.
Add loader animations (spinners) to Shiny Outputs (e.g. plots, tables) in an automated fashion. Loading animations leverage on Shiny JS events and will show whilst the output value is not yet available or is 'out-of-date' (i.e. has been invalidated and the client hasn't received the new value). The spinners won't show if the output is not rendered (e.g. a validate
or req
is preventing it from being shown).
The advantages of using this package are:
The CSS animations are bundled from https://projects.lukehaas.me/css-loaders/, where you can see how they appear.
You can use it for any type of shiny output, by wrapping the UI element with the withSpinner
tag:
# load the library
library(shinycssloaders)
...
withSpinner(plotOutput("my_plot"))
# if you have `%>%` loaded, you can do plotOutput("my_plot") %>% withSpinner()
...
The package is now available on CRAN (for outputs with variable heights, use the github version instead), however for the latest (and hopefully greatest!) version you can use the devtools
package to install it from github directly:
devtools::install_github('andrewsali/shinycssloaders')
To see how this works in action, you can check my example on shinyapps.io or run the example application from github directly:
shiny::runGitHub('andrewsali/shinycssloaders',subdir="example")
To see how the spinner works for outputs with undefined height, you can check out this example or run it from github directly:
shiny::runGitHub('andrewsali/shinycssloaders',subdir="example/table")
You can specify a spinner colour for each output or set a variable globally.
Just add color
attribute to withSpinner
:
plotOutput("my_plot") %>% withSpinner(color="#0dc5c1")
You can use options(spinner.color="#0dc5c1")
to set the global colour.
Spinner types 2-3 require you to specify a background color as well, which should match the background color of the container hosting the output. The other spinners work automatically without having to specify a background color.
The spinners scale in a relative fashion by specifying the size
argument of withSpinner (default value is 1, so if you need to double the spinner for example, set size to 2). You can also set the size globally using options(spinner.size=my_size)
.
proxy.height
option can be used to explicitly control the size of the proxy container.The first working version of the package.