Data

Tools

Indexes

Applications

Experiments

Open Source Science

shinycssloaders

⌛ Add loading animations to a Shiny output while it's recalculating

https://github.com/daattali/shinycssloaders

Science Score: 26.0%

This score indicates how likely this project is to be science-related based on various indicators:

  • ○
    CITATION.cff file
  • ✓
    codemeta.json file
    Found codemeta.json file
  • ✓
    .zenodo.json file
    Found .zenodo.json file
  • ○
    DOI references
  • ○
    Academic publication links
  • ○
    Committers with academic emails
  • ○
    Institutional organization owner
  • ○
    JOSS paper metadata
  • ○
    Scientific vocabulary similarity
    Low similarity (13.0%) to scientific vocabulary

Keywords

r r-package rstats shiny shiny-r
Last synced: 9 months ago · JSON representation

Repository

⌛ Add loading animations to a Shiny output while it's recalculating

Basic Info
Statistics
  • Stars: 419
  • Watchers: 9
  • Forks: 45
  • Open Issues: 1
  • Releases: 3
Topics
r r-package rstats shiny shiny-r
Created about 9 years ago · Last pushed 10 months ago
Metadata Files
Readme Changelog Funding License

README.md

shinycssloaders

⌛ Add loading animations to a Shiny output while it's recalculating

R-CMD-check CRAN version

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 of greying them out. By wrapping a Shiny output in withSpinner(), a spinner will automatically appear while the output is recalculating. You can also manually trigger a spinner using showSpinner().

In addition to showing spinners on outputs, you can also use showPageSpinner() to show a full-page spinner that covers the entire page.

You can choose from one of 8 built-in animation types, and customize the colour/size. You can also use your own image instead of the built-in animations. See the demo Shiny app online for examples.

Need Shiny help? I'm available for consulting.
If you find {shinycssloaders} useful, please consider supporting my work! ❤

This package is part of a larger ecosystem of packages with a shared vision: solving common Shiny issues and improving Shiny apps with minimal effort, minimal code changes, and clear documentation. Other packages for your Shiny apps:

| Package | Description | Demo | |---|---|---| | shinyjs | 💡 Easily improve the user experience of your Shiny apps in seconds | 🔗 | | shinyalert | 🗯️ Easily create pretty popup messages (modals) in Shiny | 🔗 | | shinyscreenshot | 📷 Capture screenshots of entire pages or parts of pages in Shiny apps | 🔗 | | timevis | 📅 Create interactive timeline visualizations in R | 🔗 | | colourpicker | 🎨 A colour picker tool for Shiny and for selecting colours in plots | 🔗 | | shinybrowser | 🌐 Find out information about a user's web browser in Shiny apps | 🔗 | | shinydisconnect | 🔌 Show a nice message when a Shiny app disconnects or errors | 🔗 | | shinytip | 💬 Simple flexible tooltips for Shiny apps | WIP | | shinymixpanel | 🔍 Track user interactions with Mixpanel in Shiny apps or R scripts | WIP | | shinyforms | 📝 Easily create questionnaire-type forms with Shiny | WIP |

Table of contents

Example

For interactive examples and to see some of the features, check out the demo app.

Below is a simple example of what {shinycssloaders} looks like:

demo GIF

How to use

Simply wrap a Shiny output in a call to withSpinner(). If you have %>% loaded, you can use it, for example plotOutput("myplot") %>% withSpinner().

Basic usage:

```r library(shiny)

ui <- fluidPage( actionButton("go", "Go"), shinycssloaders::withSpinner( plotOutput("plot") ) ) server <- function(input, output) { output$plot <- renderPlot({ input$go Sys.sleep(1.5) plot(runif(10)) }) } shinyApp(ui, server) ```

Using a full-page spinner:

```r library(shiny)

ui <- fluidPage( actionButton("go", "Go"), plotOutput("plot") ) server <- function(input, output) { observeEvent(input$go, { showPageSpinner() Sys.sleep(1) hidePageSpinner() }) output$plot <- renderPlot({ plot(runif(10)) }) } shinyApp(ui, server) ```

You can also use {shinycssloaders} in Rmarkdown documents, as long as they use runtime: shiny.

Installation

For most users: To install the stable CRAN version:

install.packages("shinycssloaders")

For advanced users: To install the latest development version from GitHub:

install.packages("remotes") remotes::install_github("daattali/shinycssloaders")

Features

8 customizable built-in spinners

You can use the type parameter to choose one of the 8 built-in animations, the color parameter to change the spinner's colour, and size to make the spinner smaller or larger (2 will make the spinner twice as large). For example, withSpinner(plotOutput("myplot"), type = 5, color = "#0dc5c1", size = 2).

Using a custom image

If you don't want to use any of the built-in spinners, you can also provide your own image (either a still image or a GIF) to use instead, using the image parameter.

Specifying the spinner height

The spinner attempts to automatically figure out the height of the output it replaces, and to vertically center itself. For some outputs (such as tables and text), the height is unknown, so the spinner will assume the output is 400px tall. If your output is expected to be significantly smaller or larger, you can use the proxy.height parameter to adjust this.

Manually triggering the spinner

Any Shiny output that uses withSpinner() will automatically show a spinner while it's recalculating. You can also manually show/hide an output's spinner using showSpinner()/hideSpinner().

Full-page spinner

You can also use showPageSpinner() to show a full-page spinner that will cover the entire page rather than a single Shiny output. Full page spinners support the same parameters as regular spinners, and can be removed with hidePageSpinner().

Add a message

Use the caption parameter to add a custom message under the spinner. The message can either be plain text ("Please wait") or HTML (div(strong("Loading"), br(), em("Please wait"))).

Setting spinner parameters globally

If you want all the spinners in your app to share some of the options, instead of specifying them in each call to withSpinner(), you can set them globally using R options. For example, if you want all spinners to be of a certain type and color, you can set options(spinner.type = 5, spinner.color = "#0dc5c1"). Similarly, for full-page spinners you can use page.spinner.type, page.spinner.color, etc to set default parameters instead of setting them in showPageSpinner().

Delaying the spinner appearance

If an output gets calculated very fast, the spinner may appear to "blink" because it's only visible for a very short moment. By using the delay argument, a spinner will wait a specified number of milliseconds before appearing, which can result in better user experience.

Showing a spinner on top of the output

By default, the out-dated output gets hidden while the spinner is showing. You can change this behaviour to have the spinner appear on top of the old output using the hide.ui = FALSE parameter.

Displaying a spinner inline

A spinner will take up the full available width by default. If you'd like to place multiple spinners next to each other, or if the spinner wraps an inline output (for example, textOutput(inline = TRUE)) then you can use the inline = TRUE parameter. When using inline spinners, you will generally also want to use the width argument.

Support for {bslib} fillable containers

When using a spinner inside {bslib} cards or other fillable containers, use the fill = TRUE parameter to ensure the output will behave correctly in the flexbox.

Sponsors 🏆

There are no sponsors yet

{shinycssloaders} is the result of many days of work, including many more to come. Show your support and become the first sponsor for {shinycssloaders}!

Credits

The 8 built-in animations are taken from https://projects.lukehaas.me/css-loaders/.

The package was originally created by Andrew Sali.

Owner

  • Name: Dean Attali
  • Login: daattali
  • Kind: user
  • Location: Toronto
  • Company: AttaliTech Ltd

Founder & Lead R-Shiny consultant @ AttaliTech Ltd. Passionate about writing open source tools. Extreme traveller.

GitHub Events

Total
  • Issues event: 11
  • Watch event: 19
  • Issue comment event: 16
  • Push event: 6
  • Pull request event: 4
  • Fork event: 1
Last Year
  • Issues event: 11
  • Watch event: 19
  • Issue comment event: 16
  • Push event: 6
  • Pull request event: 4
  • Fork event: 1

Committers

Last synced: about 1 year ago

All Time
  • Total Commits: 171
  • Total Committers: 4
  • Avg Commits per committer: 42.75
  • Development Distribution Score (DDS): 0.333
Past Year
  • Commits: 13
  • Committers: 1
  • Avg Commits per committer: 13.0
  • Development Distribution Score (DDS): 0.0
Top Committers
Name Email Commits
Dean Attali d****i@g****m 114
Andras Sali s****w@g****m 47
Eric Newkirk 5****k 9
Nick Brown n****n@g****m 1

Issues and Pull Requests

Last synced: 9 months ago

All Time
  • Total issues: 82
  • Total pull requests: 14
  • Average time to close issues: 10 months
  • Average time to close pull requests: almost 2 years
  • Total issue authors: 68
  • Total pull request authors: 13
  • Average comments per issue: 4.32
  • Average comments per pull request: 3.64
  • Merged pull requests: 5
  • Bot issues: 0
  • Bot pull requests: 0
Past Year
  • Issues: 4
  • Pull requests: 0
  • Average time to close issues: 4 days
  • Average time to close pull requests: N/A
  • Issue authors: 4
  • Pull request authors: 0
  • Average comments per issue: 1.75
  • Average comments per pull request: 0
  • Merged pull requests: 0
  • Bot issues: 0
  • Bot pull requests: 0
View more stats
Top Authors
Issue Authors
  • daattali (11)
  • andrewsali (3)
  • Nelson-Gon (2)
  • ismirsehregal (2)
  • trafficonese (2)
  • jsicherman (1)
  • bartekch (1)
  • mkinare (1)
  • dalekube (1)
  • dwill023 (1)
  • Kvit (1)
  • al-obrien (1)
  • kalganem (1)
  • vhorvath (1)
  • DmitriiIshutin (1)
Pull Request Authors
  • rgriffogoes (4)
  • kalganem (2)
  • jsicherman (2)
  • merlinoa (1)
  • sTeamTraen (1)
  • Nelson-Gon (1)
  • xiangnandang (1)
  • daattali (1)
  • ericnewkirk (1)
  • bthieurmel (1)
  • Nicolabo (1)
  • hillalex (1)
  • andrewsali (1)
Top Labels
Issue Labels
help wanted (4) enhancement (3) bug (1) cran (1)
Pull Request Labels

Packages

  • Total packages: 1
  • Total downloads:
    • cran 25,859 last-month
  • Total docker downloads: 151,827
  • Total dependent packages: 94
  • Total dependent repositories: 445
  • Total versions: 5
  • Total maintainers: 1
cran.r-project.org: shinycssloaders

Add Loading Animations to a 'shiny' Output While It's Recalculating

  • Versions: 5
  • Dependent Packages: 94
  • Dependent Repositories: 445
  • Downloads: 25,859 Last month
  • Docker Downloads: 151,827
Rankings
Dependent repos count: 0.7%
Stargazers count: 1.0%
Dependent packages count: 1.1%
Average: 1.6%
Forks count: 1.6%
Docker downloads count: 2.3%
Downloads: 2.6%
Maintainers (1)
daattali@gmail.com
Last synced: 9 months ago

Dependencies

DESCRIPTION cran
  • R >= 3.1 depends
  • digest * imports
  • glue * imports
  • grDevices * imports
  • shiny * imports
  • shinydisconnect * suggests
  • shinyjs * suggests
.github/workflows/R-CMD-check.yaml actions
  • actions/cache v2 composite
  • actions/checkout v2 composite
  • actions/upload-artifact main composite
  • r-lib/actions/setup-pandoc v1 composite
  • r-lib/actions/setup-r v1 composite