Add CSS Loading Animations to 'shiny' Outputs

Create a lightweight Shiny wrapper for the css-loaders created by Luke Hass < https://github.com/lukehaas/css-loaders>. Wrapping a Shiny output will automatically show a loader when the output is (re)calculating.


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:

  • Automatic spinner showing / hiding. Just add one extra R function call (see below) and your output will have the spinner showing at just the right times
  • Customizeable spinner colour (for each output or globally)
  • Customizeable spinner size (for each output or globally)
  • Choose from 8 different well-designed spinner types

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()

...

Installation

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')

Demo

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")

Changing the spinner colour

You can specify a spinner colour for each output or set a variable globally.

Locally for each output

Just add color attribute to withSpinner:

plotOutput("my_plot") %>% withSpinner(color="#0dc5c1")

Globally

You can use options(spinner.color="#0dc5c1") to set the global colour.

Background color

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.

Changing the spinner size

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).

News

shinycssloaders 0.2.0

New features

  • Better support for outputs with non-fixed height (e.g. tables with heights depending on the data received from the server), by embedding a 'proxy' container which contains the spinner. An attempt is made to automatically deduce if the output has fixed / variable height and in the latter case the proxy container will have a default height of '400px'. Otherwise the proxy.height option can be used to explicitly control the size of the proxy container.

Bug-fixes

  • Fix vertical scroll-bar appearing for Type 3 spinners
  • Fix error message still showing when recalculating for htmlwidgets

shinycssloaders 0.1.0

The first working version of the package.

Reference manual

It appears you don't have a PDF plugin for this browser. You can click here to download the reference manual.

install.packages("shinycssloaders")

0.2.0 by Andras Sali, 2 years ago


https://github.com/andrewsali/shinycssloaders


Browse source code at https://github.com/cran/shinycssloaders


Authors: Andras Sali [aut, cre] (Creator of Shiny-wrapper code) , Luke Hass [ctb, cph] (Author of included CSS loader code)


Documentation:   PDF Manual  


GPL-3 license


Imports digest, glue, grDevices, shiny


Imported by CNVScope, CaPO4Sim, ExPanDaR, GWSDAT, bibliometrix, corporaexplorer, dataesgobr, eSDM, fingertipsR, genogeographer, memery, populationPDXdesign, shinyML, shinyrecap, spANOVA, toxEval, viromeBrowser, wilson, wiseR.

Depended on by RSCAT.

Suggested by HaDeX, cNORM, getTBinR, microsamplingDesign, nph, shinycustomloader, vistributions, xplorerr.


See at CRAN