shinycssloaders/ 0000755 0001762 0000144 00000000000 14652264552 013502 5 ustar ligges users shinycssloaders/MD5 0000644 0001762 0000144 00000003567 14652264552 014025 0 ustar ligges users 520c6c91bbc371cd7162bca4645bc44e *DESCRIPTION 0f96498a14a6bbc679a7a43fef4decb2 *LICENSE befb316ef6acfdae93b6fd200338ab2c *NAMESPACE 5bb8427bb23aa880fb5809cc12c5e653 *NEWS.md a526ff95854ef189930d65123c2cc9e8 *R/buildSpinner.R dbe143a8d7604c2b2202088d7ba22a1e *R/pageSpinner.R 36909710e27750e6559681e116ff9e80 *R/shinycssloaders-package.r 997d13db8a9d7158ad12390fc3b28b8c *R/show-hide.R f3450815ef6ee1c20d9779b7dc878507 *R/utils.R 8411191ba500cc72ab586926d20a734b *R/withSpinner.R 4b7080402d5f5c3624f6e5085f7e202c *README.md 8cae963d5d7777ef81f25379c703e647 *inst/assets/spinner.css ca8d859d7bc135cce9521c3c65f685e5 *inst/assets/spinner.js a4b1ade574f3dcaac1999333104872d4 *inst/examples/demo/server.R fcc579749fc1bae38abf3310a96156ab *inst/examples/demo/ui.R 22d9e69c0ebaff22a24e241a0244532e *inst/examples/demo/www/github-green-right.png 2d8584e19c4f34c793273a72a305a89f *inst/examples/demo/www/header.png 795f5b9a2f053ce0f3a9982990b4cf7f *inst/examples/demo/www/style.css 0d0345f662a757ef17eef497fa8e83fc *inst/img/custom.gif 5581db33923abc722340bc1cd0fd4004 *inst/img/demo.gif 29eedd722c123baacc7e9b9ea62fd7df *inst/img/shinycssloaders-screenshot.png d781a86c8b24ae0e1f8e354cfcabe36e *inst/loaders-templates/load1.css a4f24870f10aa98318e496dbe75e288d *inst/loaders-templates/load2.css d8cc93a6a4d846a3475248d2c98dbdb7 *inst/loaders-templates/load3.css bfa76d038c4f18a5806e1f50ca703c52 *inst/loaders-templates/load4.css 2222ebe035e664a506cca840261beefb *inst/loaders-templates/load5.css bfa76d038c4f18a5806e1f50ca703c52 *inst/loaders-templates/load6.css bfa76d038c4f18a5806e1f50ca703c52 *inst/loaders-templates/load7.css 553234aa4cfc93b4d9791234d7d0fdba *inst/loaders-templates/load8.css fbd64d926b16c8615c960c145022f46a *man/shinycssloaders-package.Rd 3d493e242c070eacac49cfea9ce9b3ed *man/showHide.Rd aeb341c60ecbd097aaee158cc52189f3 *man/showHidePage.Rd 0eb4130c358137e4cc28bed2009fb199 *man/withSpinner.Rd shinycssloaders/R/ 0000755 0001762 0000144 00000000000 14637401631 013675 5 ustar ligges users shinycssloaders/R/pageSpinner.R 0000644 0001762 0000144 00000010135 14652231256 016274 0 ustar ligges users #' Show (and hide) a full-page spinner that covers the entire page #' #' Use these functions to show and hide a full-page spinner.\cr\cr #' All parameters (except `expr`) can be set globally in order to use a default setting for all #' full-page spinner in your Shiny app. This can be done by setting an R option with the parameter's #' name prepended by `"page.spinner."`. For example, to set all page spinners to type=5 and #' color=#0dc5c1 by default, use `options(page.spinner.type = 5, page.spinner.color = "#0dc5c1")`. #' @param expr (optional) An R expression to run while showing the spinner. The #' spinner will automatically get hidden when this expression completes. If not provided, #' you must explicitly end the spinner with a call to `hidePageSpinner()`. #' @param background Background color for the spinner. You can use semi-transparent colours #' in order to have the Shiny app visible in the background, eg. `"#FFFFFFD0"` or #' `"rgba(0, 0, 0, 0.7)"`. #' @inheritParams withSpinner #' @return If `expr` is provided, the result of `expr` is returned. Otherwise, `NULL`. #' @seealso [withSpinner()], [showSpinner()], [hideSpinner()] #' @examples #' if (interactive()) { #' library(shiny) #' #' #--- Example 1: Using showPageSpinner/hidePageSpinner --- #' #' 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) #' #' #--- Example 2: Using showPageSpinner with expr --- #' #' some_slow_function <- function() { #' Sys.sleep(1) #' } #' #' ui <- fluidPage( #' actionButton("go", "Go"), #' plotOutput("plot") #' ) #' server <- function(input, output) { #' observeEvent(input$go, { #' showPageSpinner({ some_slow_function() }) #' }) #' output$plot <- renderPlot({ #' plot(runif(10)) #' }) #' } #' shinyApp(ui, server) #' } #' @name showHidePage NULL #' @export #' @rdname showHidePage showPageSpinner <- function( expr, background = getOption("page.spinner.background", default = "#FFFFFFCC"), type = getOption("page.spinner.type", default = 8), color = getOption("page.spinner.color", default = "#0275D8"), size = getOption("page.spinner.size", default = 1), color.background = getOption("page.spinner.color.background"), custom.css = getOption("page.spinner.custom.css", default = FALSE), id = getOption("page.spinner.id"), image = getOption("page.spinner.image"), image.width = getOption("page.spinner.image.width"), image.height = getOption("page.spinner.image.height"), caption = getOption("page.spinner.caption") ) { session <- getSession() if (is.null(session$userData$.shinycssloaders_added) || !session$userData$.shinycssloaders_added) { shiny::insertUI("head", "beforeEnd", immediate = TRUE, ui = getDependencies()) session$userData$.shinycssloaders_added <- TRUE } spinner <- buildSpinner( spinner_type = "page", type = type, color = color, size = size, color.background = color.background, custom.css = custom.css, id = id, image = image, image.width = image.width, image.height = image.height, caption = caption, ui_element = NULL, proxy.height = NULL, hide.ui = FALSE ) hidePageSpinner() spinner_container <- shiny::div( id = "shinycssloaders-global-spinner", style = paste("background:", background), spinner ) shiny::insertUI("body", "beforeEnd", immediate = TRUE, ui = spinner_container) if (missing(expr)) { value <- invisible(NULL) } else { value <- expr on.exit(hidePageSpinner()) } value } #' @export #' @rdname showHidePage hidePageSpinner <- function() { shiny::removeUI("#shinycssloaders-global-spinner", immediate = TRUE) shiny::removeUI(".global-spinner-css", immediate = TRUE) invisible(NULL) } shinycssloaders/R/buildSpinner.R 0000644 0001762 0000144 00000004352 14637401631 016462 0 ustar ligges users buildSpinner <- function( spinner_type = c("output", "page"), ui_element, type, color, size, color.background, custom.css, proxy.height, id, image, image.width, image.height, hide.ui, caption ) { spinner_type <- match.arg(spinner_type) output_spinner <- (spinner_type == "output") if (!is.null(image)) { type <- 0 } if (!type %in% 0:8) { stop("shinycssloaders: `type` must be an integer between 0 and 8.") } if (grepl("rgb", color, fixed = TRUE)) { stop("shinycssloaders: `color` should be given in hex format (#XXXXXX).") } if (is.character(custom.css)) { stop("shinycssloaders: It looks like you provided a string to `custom.css`, but it needs to be either `TRUE` or `FALSE`. ", "The actual CSS needs to added to the app's UI.") } if (is.null(id)) { id <- paste0("spinner-", digest::digest(ui_element)) } css_rules_tag <- get_spinner_css_tag(type, color, size, color.background, custom.css, id, image, caption, output_spinner) if (!is.null(caption)) { caption <- shiny::div( id = paste0(id, "__caption"), class = "shiny-spinner-caption", caption ) } if (output_spinner) { proxy_element <- get_proxy_element(ui_element, proxy.height, hide.ui) } else { proxy_element <- NULL } parent_cls <- "shiny-spinner-output-container" if (hide.ui) { parent_cls <- paste(parent_cls, "shiny-spinner-hideui") } child_cls <- "load-container" if (output_spinner) { child_cls <- paste(child_cls, "shiny-spinner-hidden") } if (is.null(image)) { child_cls <- paste(child_cls, paste0("load", type)) } if (is.null(image)) { spinner_el <- shiny::div(id = id, class = "loader", (if (type == 0) "" else "Loading...")) } else { spinner_el <- shiny::tags$img(id = id, src = image, alt = "Loading...", width = image.width, height = image.height) } shiny::div( css_rules_tag, `data-spinner-id` = id, class = parent_cls, shiny::div( class = child_cls, spinner_el, caption ), proxy_element, ui_element ) } shinycssloaders/R/withSpinner.R 0000644 0001762 0000144 00000011137 14652231176 016337 0 ustar ligges users #' Add a spinner that shows while an output is recalculating #' #' Add a spinner that automatically shows while an output is recalculating. You can also manually trigger the spinner #' using [showSpinner()] and [hideSpinner()].\cr\cr #' Most parameters can be set globally in order to use a default setting for all spinners in your Shiny app. #' This can be done by setting an R option with the parameter's name prepended by `"spinner."`. For example, to set all spinners #' to type=5 and color=#0dc5c1 by default, use `options(spinner.type = 5, spinner.color = "#0dc5c1")`. The following parameters #' cannot be set globally: `ui_element`, `id`.\cr\cr #' Use [showPageSpinner()] to show a spinner on the entire page instead of individual outputs. #' @param ui_element A UI element that should be wrapped with a spinner when the corresponding output is being calculated. #' @param type The type of spinner to use. Valid values are integers between 0-8 (0 means no spinner). Check out #' \url{https://daattali.com/shiny/shinycssloaders-demo/} to see the different types of spinners. #' You can also use your own custom image using the `image` parameter. #' @param color The color of the spinner in hex format. Ignored if `image` is used. #' @param size The size of the spinner, relative to its default size (default is 1, a size of 2 means twice as large). #' Ignored if `image` is used. #' @param color.background For certain spinners (type 2-3), you will need to specify the background color of the spinner. #' Ignored if `image` is used. #' @param custom.css Set to `TRUE` if you have your own custom CSS that you defined and you don't want the automatic CSS applied to the spinner. #' Ignored if `image` is used. #' @param proxy.height If the output UI doesn't specify the output height, you can set a proxy height. It defaults to "400px" #' for outputs with undefined height. Ignored if `hide.ui` is set to `FALSE`. #' @param id The HTML ID to use for the spinner. If you don't provide one, it will be generated automatically. #' @param image The path or URL of the image to use if you want to use a custom image instead of a built-in spinner. #' If `image` is provided, then `type` is ignored. #' @param image.height The height for the custom image spinner, in pixels. If not provided, then the original #' size of the image is used. Ignored if not using `image`. #' @param image.width The width for the custom image spinner, in pixels. If not provided, then the original #' size of the image is used. Ignored if not using `image`. #' @param hide.ui By default, while an output is recalculating, the output UI is hidden and the spinner is visible instead. #' Setting `hide.ui = FALSE` will result in the spinner showing up on top of the previous output UI. #' @param caption Caption to display below the spinner or image (text or HTML). The caption's font color is determined #' by the `color` parameter. Ignored if `type` is 1. #' @seealso [showSpinner()], [hideSpinner()], [showPageSpinner()] #' @examples #' if (interactive()) { #' library(shiny) #' #' shinyApp( #' ui = fluidPage( #' actionButton("go", "Go"), #' withSpinner(plotOutput("plot")) #' ), #' server = function(input, output) { #' output$plot <- renderPlot({ #' input$go #' Sys.sleep(1.5) #' plot(runif(10)) #' }) #' } #' ) #' } #' @export withSpinner <- function( ui_element, type = getOption("spinner.type", default = 1), color = getOption("spinner.color", default = "#0275D8"), size = getOption("spinner.size", default = 1), color.background = getOption("spinner.color.background"), custom.css = getOption("spinner.custom.css", default = FALSE), proxy.height = getOption("spinner.proxy.height"), id = NULL, image = getOption("spinner.image"), image.width = getOption("spinner.image.width"), image.height = getOption("spinner.image.height"), hide.ui = getOption("spinner.hide.ui", default = TRUE), caption = getOption("spinner.caption") ) { if (!inherits(ui_element, "shiny.tag") && !inherits(ui_element, "shiny.tag.list")) { stop("`ui_element` must be a Shiny tag", call. = FALSE) } spinner <- buildSpinner( spinner_type = "output", ui_element = ui_element, type = type, color = color, size = size, color.background = color.background, custom.css = custom.css, proxy.height = proxy.height, id = id, image = image, image.width = image.width, image.height = image.height, hide.ui = hide.ui, caption = caption ) htmltools::attachDependencies(spinner, getDependencies()) } shinycssloaders/R/utils.R 0000644 0001762 0000144 00000006407 14637401631 015167 0 ustar ligges users # get the shiny session object getSession <- function() { session <- shiny::getDefaultReactiveDomain() if (is.null(session)) { stop("Could not find the Shiny session object. This usually happens if you're trying to call a function outside of a Shiny app.", call. = FALSE) } session } # insert content into the
tag of the document if this is a proper # Shiny app, but if it's inside an interactive Rmarkdown document then don't # use as it won't work insertHead <- function(...) { if (requireNamespace("knitr", quietly = TRUE)) { runtime <- knitr::opts_knit$get("rmarkdown.runtime") if (!is.null(runtime) && runtime == "shiny") { # we're inside an Rmd document shiny::tagList(...) } else { # we're in a shiny app shiny::tags$head(...) } } else { # we're in a shiny app shiny::tags$head(...) } } getDependencies <- function() { list( htmltools::htmlDependency( name = "shinycssloaders-binding", version = as.character(utils::packageVersion("shinycssloaders")), package = "shinycssloaders", src = "assets", script = "spinner.js", stylesheet = "spinner.css" ) ) } get_proxy_element <- function(ui_element, proxy.height, hide.ui) { if (!hide.ui) { return(shiny::tagList()) } if (is.null(proxy.height)) { if (!grepl("height:\\s*\\d", ui_element)) { proxy.height <- "400px" } } else { if (is.numeric(proxy.height)) { proxy.height <- paste0(proxy.height, "px") } } if (is.null(proxy.height)) { proxy_element <- shiny::tagList() } else { proxy_element <- shiny::div(style=glue::glue("height:{proxy.height}"), class="shiny-spinner-placeholder") } } get_spinner_css_tag <- function(type, color, size, color.background, custom.css, id, image, caption, output_spinner) { base_css <- "" add_default_style <- (is.null(image) && !custom.css && type != 0) if (add_default_style) { if (type %in% c(2, 3) && is.null(color.background)) { stop("shinycssloaders: For spinner types 2 & 3 you need to specify `color.background`.") } color.rgb <- paste(grDevices::col2rgb(color), collapse = ",") color.alpha0 <- sprintf("rgba(%s, 0)", color.rgb) color.alpha2 <- sprintf("rgba(%s, 0.2)", color.rgb) css_file <- system.file(glue::glue("loaders-templates/load{type}.css"), package="shinycssloaders") if (file.exists(css_file)) { base_css <- paste(readLines(css_file), collapse = " ") base_css <- glue::glue(base_css, .open = "{{", .close = "}}") } # get default font-size from css, and cut it by 25%, as for outputs we usually need something smaller size_px <- round(c(11, 11, 10, 20, 25, 90, 10, 10)[type] * size * 0.75) base_css <- paste(base_css, glue::glue("#{id} {{ font-size: {size_px}px; }}")) } if (!is.null(caption)) { base_css <- paste(base_css, glue::glue("#{id}__caption {{ color: {color}; font-size: {size + 0.5}em; }}")) } css_rules_tag <- NULL if (nzchar(base_css)) { css_rules_tag <- insertHead(shiny::tags$style( class = if (!output_spinner) "global-spinner-css", shiny::HTML(base_css) )) } css_rules_tag } shinycssloaders/R/shinycssloaders-package.r 0000644 0001762 0000144 00000000043 14637401631 020663 0 ustar ligges users #' @keywords internal "_PACKAGE" shinycssloaders/R/show-hide.R 0000644 0001762 0000144 00000004451 14637401631 015713 0 ustar ligges users #' Manually show/hide a spinner #' #' Any Shiny output that uses [withSpinner()] will automatically show a spinner #' while it's recalculating. Use [showSpinner()] and [hideSpinner()] to manually #' trigger the spinner on-demand. #' @param id The ID of the Shiny output. The corresponding output must have been #' wrapped in [withSpinner()] in the UI. #' @param expr (optional) An R expression to run while showing the spinner. The #' spinner will automatically get hidden when this expression completes. #' @return If `expr` is provided, the result of `expr` is returned. Otherwise, `NULL`. #' @seealso [withSpinner()] #' @examples #' if (interactive()) { #' library(shiny) #' #' #--- Example 1: Using showSpinner/hideSpinner --- #' #' shinyApp( #' ui = fluidPage( #' actionButton("show", "Show"), #' actionButton("hide", "Hide"), #' withSpinner(plotOutput("plot")) #' ), #' server = function(input, output) { #' output$plot <- renderPlot({ #' plot(runif(10)) #' }) #' observeEvent(input$show, { #' showSpinner("plot") #' }) #' observeEvent(input$hide, { #' hideSpinner("plot") #' }) #' } #' ) #' #' #--- Example 2: Using showSpinner with expr --- #' #' some_slow_function <- function() { #' Sys.sleep(2) #' } #' #' shinyApp( #' ui = fluidPage( #' actionButton("show", "Show"), #' withSpinner(plotOutput("plot")) #' ), #' server = function(input, output) { #' output$plot <- renderPlot({ #' plot(runif(10)) #' }) #' observeEvent(input$show, { #' showSpinner("plot", { some_slow_function() }) #' }) #' } #' ) #' } #' @name showHide NULL #' @export #' @rdname showHide showSpinner <- function(id, expr) { session <- getSession() idns <- session$ns(id) session$sendCustomMessage("shinycssloaders.show_spinner", list(id = idns)) if (missing(expr)) { value <- invisible(NULL) } else { value <- expr on.exit(hideSpinner(id)) } value } #' @export #' @rdname showHide hideSpinner <- function(id) { session <- getSession() idns <- session$ns(id) session$sendCustomMessage("shinycssloaders.hide_spinner", list(id = idns)) invisible(NULL) } shinycssloaders/NAMESPACE 0000644 0001762 0000144 00000000241 14637401631 014710 0 ustar ligges users # Generated by roxygen2: do not edit by hand export(hidePageSpinner) export(hideSpinner) export(showPageSpinner) export(showSpinner) export(withSpinner) shinycssloaders/LICENSE 0000644 0001762 0000144 00000000054 14637401631 014500 0 ustar ligges users YEAR: 2022 COPYRIGHT HOLDER: Dean Attali shinycssloaders/NEWS.md 0000644 0001762 0000144 00000006167 14652230630 014600 0 ustar ligges users # shinycssloaders 1.1.0 (2024-07-30) - Add `showSpinner()` and `hideSpinner()` that allow you to manually trigger the spinner (#56) - Add support for full-page spinner that covers the entire page using `showPageSpinner()` and `hidePageSpinner()` (#42) - Add support for Rmarkdown documents (#8) - Add support for setting global options for most parameters (#78) - Add `caption` argument to allow showing a message under the spinner (#28) - Fix page sometimes wobbling because of hidden spinner (#54) - Fix bug where `shiny::tagList()` would throw an error (#73) - Fix bug where using an image spinner would cause the Shiny output to be centered (#79) - Add more informative error messages (#69) - Replace `addResourcePath()` with `htmlDependency()` which is more robust (#75) # shinycssloaders 1.0.0 (2020-07-28) - Add support for custom images with `image` parameter (#46) - Add support for making the spinner show up on top of the output instead of replacing it, with a `hide.ui` parameter (#22) - Add `id` parameter to `withSpinner()` to allow you to target a specific spinner with CSS (#19) - Allow spinner type 0, which means no loading icon is shown (#18) - Changed the license from GPL-3 to MIT - Fix bug where loaders weren't working in uiOutput (#39) - Fix bug where `withSpinner()` was causing `shiny::appendTab()` to break (#45) - Add support for `proxy.height` to be specified as a number instead of a string (`300` vs `"300px"`) - Fixed bug where spinner wasn't showing up for certain output IDs such as "map" (#49) - Clarify the `custom.css` parameter which was causing confusion (#21) - Don't expose 'assets' as a resourch path because it blocks shiny apps from having a www/assets/ folder (#48) - Internal refactoring: Use one CSS file for all styles, and use CSS files to load custom CSS of each style (#37) - Complete revamp of all the documentation - Added a sample Shiny app "demo" that lets you experiment with all loader types and parameters - File cleanup: Remove all files and dirs from inst/css-loaders and only keep the CSS (#38) # shinycssloaders 0.3 (2020-01-14) - Remove debug message from JS console (#26) - Ensure spinner doesn't show forever when used on dynamic outputs - Fix bug that caused errors with outputs with special ID characters and caused errors when using shiny bookmarks (#16) - Fix type 1 and type 7 spinners on IE11 (#1) - Dean Attali took over as maintainer of the package # 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. shinycssloaders/inst/ 0000755 0001762 0000144 00000000000 14637401631 014451 5 ustar ligges users shinycssloaders/inst/loaders-templates/ 0000755 0001762 0000144 00000000000 14637401631 020076 5 ustar ligges users shinycssloaders/inst/loaders-templates/load7.css 0000644 0001762 0000144 00000000043 14637401631 021613 0 ustar ligges users #{{id}} { color: {{color}}; } shinycssloaders/inst/loaders-templates/load3.css 0000644 0001762 0000144 00000001010 14637401631 021602 0 ustar ligges users #{{id}} { background: -moz-linear-gradient(left, {{color}} 10%, {{color.alpha0}} 42%); background: -webkit-linear-gradient(left, {{color}} 10%, {{color.alpha0}} 42%); background: -o-linear-gradient(left, {{color}} 10%, {{color.alpha0}} 42%); background: -ms-linear-gradient(left, {{color}} 10%, {{color.alpha0}} 42%); background: linear-gradient(to right, {{color}} 10%, {{color.alpha0}} 42%); } #{{id}}:before { background: {{color}}; } #{{id}}:after { background: {{color.background}}; } shinycssloaders/inst/loaders-templates/load2.css 0000644 0001762 0000144 00000000154 14637401631 021611 0 ustar ligges users #{{id}} { color: {{color}}; } #{{id}}:before, #{{id}}:after { background: {{color.background}}; } shinycssloaders/inst/loaders-templates/load6.css 0000644 0001762 0000144 00000000043 14637401631 021612 0 ustar ligges users #{{id}} { color: {{color}}; } shinycssloaders/inst/loaders-templates/load1.css 0000644 0001762 0000144 00000000152 14637401631 021606 0 ustar ligges users #{{id}}, #{{id}}:before, #{{id}}:after { background: {{color}}; } #{{id}} { color: {{color}}; } shinycssloaders/inst/loaders-templates/load4.css 0000644 0001762 0000144 00000000043 14637401631 021610 0 ustar ligges users #{{id}} { color: {{color}}; } shinycssloaders/inst/loaders-templates/load5.css 0000644 0001762 0000144 00000013772 14637401631 021626 0 ustar ligges users #{{id}} { -webkit-animation: load5-{{id}} 1.1s infinite ease; animation: load5-{{id}} 1.1s infinite ease; } @-webkit-keyframes load5-{{id}} { 0%, 100% { box-shadow: 0em -2.6em 0em 0em {{color}}, 1.8em -1.8em 0 0em rgba({{color.rgb}}, 0.2), 2.5em 0em 0 0em rgba({{color.rgb}}, 0.2), 1.75em 1.75em 0 0em rgba({{color.rgb}}, 0.2), 0em 2.5em 0 0em rgba({{color.rgb}}, 0.2), -1.8em 1.8em 0 0em rgba({{color.rgb}}, 0.2), -2.6em 0em 0 0em rgba({{color.rgb}}, 0.5), -1.8em -1.8em 0 0em rgba({{color.rgb}}, 0.7); } 12.5% { box-shadow: 0em -2.6em 0em 0em rgba({{color.rgb}}, 0.7), 1.8em -1.8em 0 0em {{color}}, 2.5em 0em 0 0em rgba({{color.rgb}}, 0.2), 1.75em 1.75em 0 0em rgba({{color.rgb}}, 0.2), 0em 2.5em 0 0em rgba({{color.rgb}}, 0.2), -1.8em 1.8em 0 0em rgba({{color.rgb}}, 0.2), -2.6em 0em 0 0em rgba({{color.rgb}}, 0.2), -1.8em -1.8em 0 0em rgba({{color.rgb}}, 0.5); } 25% { box-shadow: 0em -2.6em 0em 0em rgba({{color.rgb}}, 0.5), 1.8em -1.8em 0 0em rgba({{color.rgb}}, 0.7), 2.5em 0em 0 0em {{color}}, 1.75em 1.75em 0 0em rgba({{color.rgb}}, 0.2), 0em 2.5em 0 0em rgba({{color.rgb}}, 0.2), -1.8em 1.8em 0 0em rgba({{color.rgb}}, 0.2), -2.6em 0em 0 0em rgba({{color.rgb}}, 0.2), -1.8em -1.8em 0 0em rgba({{color.rgb}}, 0.2); } 37.5% { box-shadow: 0em -2.6em 0em 0em rgba({{color.rgb}}, 0.2), 1.8em -1.8em 0 0em rgba({{color.rgb}}, 0.5), 2.5em 0em 0 0em rgba({{color.rgb}}, 0.7), 1.75em 1.75em 0 0em {{color}}, 0em 2.5em 0 0em rgba({{color.rgb}}, 0.2), -1.8em 1.8em 0 0em rgba({{color.rgb}}, 0.2), -2.6em 0em 0 0em rgba({{color.rgb}}, 0.2), -1.8em -1.8em 0 0em rgba({{color.rgb}}, 0.2); } 50% { box-shadow: 0em -2.6em 0em 0em rgba({{color.rgb}}, 0.2), 1.8em -1.8em 0 0em rgba({{color.rgb}}, 0.2), 2.5em 0em 0 0em rgba({{color.rgb}}, 0.5), 1.75em 1.75em 0 0em rgba({{color.rgb}}, 0.7), 0em 2.5em 0 0em {{color}}, -1.8em 1.8em 0 0em rgba({{color.rgb}}, 0.2), -2.6em 0em 0 0em rgba({{color.rgb}}, 0.2), -1.8em -1.8em 0 0em rgba({{color.rgb}}, 0.2); } 62.5% { box-shadow: 0em -2.6em 0em 0em rgba({{color.rgb}}, 0.2), 1.8em -1.8em 0 0em rgba({{color.rgb}}, 0.2), 2.5em 0em 0 0em rgba({{color.rgb}}, 0.2), 1.75em 1.75em 0 0em rgba({{color.rgb}}, 0.5), 0em 2.5em 0 0em rgba({{color.rgb}}, 0.7), -1.8em 1.8em 0 0em {{color}}, -2.6em 0em 0 0em rgba({{color.rgb}}, 0.2), -1.8em -1.8em 0 0em rgba({{color.rgb}}, 0.2); } 75% { box-shadow: 0em -2.6em 0em 0em rgba({{color.rgb}}, 0.2), 1.8em -1.8em 0 0em rgba({{color.rgb}}, 0.2), 2.5em 0em 0 0em rgba({{color.rgb}}, 0.2), 1.75em 1.75em 0 0em rgba({{color.rgb}}, 0.2), 0em 2.5em 0 0em rgba({{color.rgb}}, 0.5), -1.8em 1.8em 0 0em rgba({{color.rgb}}, 0.7), -2.6em 0em 0 0em {{color}}, -1.8em -1.8em 0 0em rgba({{color.rgb}}, 0.2); } 87.5% { box-shadow: 0em -2.6em 0em 0em rgba({{color.rgb}}, 0.2), 1.8em -1.8em 0 0em rgba({{color.rgb}}, 0.2), 2.5em 0em 0 0em rgba({{color.rgb}}, 0.2), 1.75em 1.75em 0 0em rgba({{color.rgb}}, 0.2), 0em 2.5em 0 0em rgba({{color.rgb}}, 0.2), -1.8em 1.8em 0 0em rgba({{color.rgb}}, 0.5), -2.6em 0em 0 0em rgba({{color.rgb}}, 0.7), -1.8em -1.8em 0 0em {{color}}; } } @keyframes load5-{{id}} { 0%, 100% { box-shadow: 0em -2.6em 0em 0em {{color}}, 1.8em -1.8em 0 0em rgba({{color.rgb}}, 0.2), 2.5em 0em 0 0em rgba({{color.rgb}}, 0.2), 1.75em 1.75em 0 0em rgba({{color.rgb}}, 0.2), 0em 2.5em 0 0em rgba({{color.rgb}}, 0.2), -1.8em 1.8em 0 0em rgba({{color.rgb}}, 0.2), -2.6em 0em 0 0em rgba({{color.rgb}}, 0.5), -1.8em -1.8em 0 0em rgba({{color.rgb}}, 0.7); } 12.5% { box-shadow: 0em -2.6em 0em 0em rgba({{color.rgb}}, 0.7), 1.8em -1.8em 0 0em {{color}}, 2.5em 0em 0 0em rgba({{color.rgb}}, 0.2), 1.75em 1.75em 0 0em rgba({{color.rgb}}, 0.2), 0em 2.5em 0 0em rgba({{color.rgb}}, 0.2), -1.8em 1.8em 0 0em rgba({{color.rgb}}, 0.2), -2.6em 0em 0 0em rgba({{color.rgb}}, 0.2), -1.8em -1.8em 0 0em rgba({{color.rgb}}, 0.5); } 25% { box-shadow: 0em -2.6em 0em 0em rgba({{color.rgb}}, 0.5), 1.8em -1.8em 0 0em rgba({{color.rgb}}, 0.7), 2.5em 0em 0 0em {{color}}, 1.75em 1.75em 0 0em rgba({{color.rgb}}, 0.2), 0em 2.5em 0 0em rgba({{color.rgb}}, 0.2), -1.8em 1.8em 0 0em rgba({{color.rgb}}, 0.2), -2.6em 0em 0 0em rgba({{color.rgb}}, 0.2), -1.8em -1.8em 0 0em rgba({{color.rgb}}, 0.2); } 37.5% { box-shadow: 0em -2.6em 0em 0em rgba({{color.rgb}}, 0.2), 1.8em -1.8em 0 0em rgba({{color.rgb}}, 0.5), 2.5em 0em 0 0em rgba({{color.rgb}}, 0.7), 1.75em 1.75em 0 0em {{color}}, 0em 2.5em 0 0em rgba({{color.rgb}}, 0.2), -1.8em 1.8em 0 0em rgba({{color.rgb}}, 0.2), -2.6em 0em 0 0em rgba({{color.rgb}}, 0.2), -1.8em -1.8em 0 0em rgba({{color.rgb}}, 0.2); } 50% { box-shadow: 0em -2.6em 0em 0em rgba({{color.rgb}}, 0.2), 1.8em -1.8em 0 0em rgba({{color.rgb}}, 0.2), 2.5em 0em 0 0em rgba({{color.rgb}}, 0.5), 1.75em 1.75em 0 0em rgba({{color.rgb}}, 0.7), 0em 2.5em 0 0em {{color}}, -1.8em 1.8em 0 0em rgba({{color.rgb}}, 0.2), -2.6em 0em 0 0em rgba({{color.rgb}}, 0.2), -1.8em -1.8em 0 0em rgba({{color.rgb}}, 0.2); } 62.5% { box-shadow: 0em -2.6em 0em 0em rgba({{color.rgb}}, 0.2), 1.8em -1.8em 0 0em rgba({{color.rgb}}, 0.2), 2.5em 0em 0 0em rgba({{color.rgb}}, 0.2), 1.75em 1.75em 0 0em rgba({{color.rgb}}, 0.5), 0em 2.5em 0 0em rgba({{color.rgb}}, 0.7), -1.8em 1.8em 0 0em {{color}}, -2.6em 0em 0 0em rgba({{color.rgb}}, 0.2), -1.8em -1.8em 0 0em rgba({{color.rgb}}, 0.2); } 75% { box-shadow: 0em -2.6em 0em 0em rgba({{color.rgb}}, 0.2), 1.8em -1.8em 0 0em rgba({{color.rgb}}, 0.2), 2.5em 0em 0 0em rgba({{color.rgb}}, 0.2), 1.75em 1.75em 0 0em rgba({{color.rgb}}, 0.2), 0em 2.5em 0 0em rgba({{color.rgb}}, 0.5), -1.8em 1.8em 0 0em rgba({{color.rgb}}, 0.7), -2.6em 0em 0 0em {{color}}, -1.8em -1.8em 0 0em rgba({{color.rgb}}, 0.2); } 87.5% { box-shadow: 0em -2.6em 0em 0em rgba({{color.rgb}}, 0.2), 1.8em -1.8em 0 0em rgba({{color.rgb}}, 0.2), 2.5em 0em 0 0em rgba({{color.rgb}}, 0.2), 1.75em 1.75em 0 0em rgba({{color.rgb}}, 0.2), 0em 2.5em 0 0em rgba({{color.rgb}}, 0.2), -1.8em 1.8em 0 0em rgba({{color.rgb}}, 0.5), -2.6em 0em 0 0em rgba({{color.rgb}}, 0.7), -1.8em -1.8em 0 0em {{color}}; } } shinycssloaders/inst/loaders-templates/load8.css 0000644 0001762 0000144 00000000301 14637401631 021611 0 ustar ligges users #{{id}} { border-top: 1.1em solid {{color.alpha2}}; border-right: 1.1em solid {{color.alpha2}}; border-bottom: 1.1em solid {{color.alpha2}}; border-left: 1.1em solid {{color}}; } shinycssloaders/inst/assets/ 0000755 0001762 0000144 00000000000 14637401631 015753 5 ustar ligges users shinycssloaders/inst/assets/spinner.css 0000644 0001762 0000144 00000045071 14637401631 020152 0 ustar ligges users .shiny-spinner-output-container { position: relative; } .load-container { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); /* to avoid showing a vertical scrollbar http://stackoverflow.com/questions/38251204/horizontal-animation-causes-vertical-scrollbar-in-css */ overflow: hidden; width: 100%; } .shiny-spinner-hidden { position: absolute; top:0; left:0; z-index: -1; } .shiny-spinner-hidden.load-container { display: none; } .shiny-spinner-output-container .load-container { text-align: center; } #shinycssloaders-global-spinner { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 100000000; } #shinycssloaders-global-spinner .shiny-spinner-output-container { height: 100%; } /* The following is a modified concatenation of all the CSS files in the css-loaders project */ .load1 .loader, .load1 .loader:before, .load1 .loader:after { background: #ffffff; -webkit-animation: load1 1s infinite ease-in-out; animation: load1 1s infinite ease-in-out; width: 1em; height: 4em; } .load1 .loader { color: #ffffff; text-indent: -9999em; margin: 3em auto; position: relative; font-size: 11px; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } .load1 .loader:before, .load1 .loader:after { position: absolute; top: 0; content: ''; } .load1 .loader:before { left: -1.5em; -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .load1 .loader:after { left: 1.5em; } @-webkit-keyframes load1 { 0%, 80%, 100% { box-shadow: 0 0, 0 0; } 40% { box-shadow: 0 -2em, 0 2em; } } @keyframes load1 { 0%, 80%, 100% { box-shadow: 0 0, 0 0; } 40% { box-shadow: 0 -2em, 0 2em; } } .load2 .loader, .load2 .loader:before, .load2 .loader:after { border-radius: 50%; } .load2 .loader { color: #ffffff; font-size: 11px; text-indent: -99999em; margin: 1em auto; position: relative; width: 10em; height: 10em; box-shadow: inset 0 0 0 1em; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); } .load2 .loader:before, .load2 .loader:after { position: absolute; content: ''; } .load2 .loader:before { width: 5.2em; height: 10.2em; background: #0dc5c1; border-radius: 10.2em 0 0 10.2em; top: -0.1em; left: -0.1em; -webkit-transform-origin: 5.1em 5.1em; transform-origin: 5.1em 5.1em; -webkit-animation: load2 2s infinite ease 1.5s; animation: load2 2s infinite ease 1.5s; } .load2 .loader:after { width: 5.2em; height: 10.2em; background: #0dc5c1; border-radius: 0 10.2em 10.2em 0; top: -0.1em; left: 4.9em; -webkit-transform-origin: 0.1em 5.1em; transform-origin: 0.1em 5.1em; -webkit-animation: load2 2s infinite ease; animation: load2 2s infinite ease; } @-webkit-keyframes load2 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes load2 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .load3 .loader { font-size: 10px; margin: 1em auto; text-indent: -9999em; width: 11em; height: 11em; border-radius: 50%; background: #ffffff; background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%); background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%); background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%); background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%); background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%); position: relative; -webkit-animation: load3 1.4s infinite linear; animation: load3 1.4s infinite linear; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); } .load3 .loader:before { width: 50%; height: 50%; background: #ffffff; border-radius: 100% 0 0 0; position: absolute; top: 0; left: 0; content: ''; } .load3 .loader:after { background: #0dc5c1; width: 75%; height: 75%; border-radius: 50%; content: ''; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } @-webkit-keyframes load3 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes load3 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .load4 .loader { color: #ffffff; font-size: 20px; margin: 4em auto; width: 1em; height: 1em; border-radius: 50%; position: relative; text-indent: -9999em; -webkit-animation: load4 1.3s infinite linear; animation: load4 1.3s infinite linear; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); } @-webkit-keyframes load4 { 0%, 100% { box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0; } 12.5% { box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; } 25% { box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; } 37.5% { box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em; } 50% { box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em; } 62.5% { box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em; } 75% { box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0; } 87.5% { box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em; } } @keyframes load4 { 0%, 100% { box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0; } 12.5% { box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; } 25% { box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; } 37.5% { box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em; } 50% { box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em; } 62.5% { box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em; } 75% { box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0; } 87.5% { box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em; } } .load5 .loader { margin: 3em auto; font-size: 25px; width: 1em; height: 1em; border-radius: 50%; position: relative; text-indent: -9999em; -webkit-animation: load5 1.1s infinite ease; animation: load5 1.1s infinite ease; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); } @-webkit-keyframes load5 { 0%, 100% { box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7); } 12.5% { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5); } 25% { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); } 37.5% { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); } 50% { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); } 62.5% { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); } 75% { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); } 87.5% { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff; } } @keyframes load5 { 0%, 100% { box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7); } 12.5% { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5); } 25% { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); } 37.5% { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); } 50% { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); } 62.5% { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); } 75% { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); } 87.5% { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff; } } .load6 .loader { color: #ffffff; font-size: 90px; text-indent: -9999em; overflow: hidden; width: 1em; height: 1em; border-radius: 50%; margin: 0.5em auto; position: relative; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation: load6 1.7s infinite ease; animation: load6 1.7s infinite ease; } @-webkit-keyframes load6 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; } 5%, 95% { box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; } 10%, 59% { box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em; } 20% { box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em; } 38% { box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em; } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; } } @keyframes load6 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; } 5%, 95% { box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; } 10%, 59% { box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em; } 20% { box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em; } 38% { box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em; } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; } } .load7 .loader, .load7 .loader:before, .load7 .loader:after { border-radius: 50%; width: 2.5em; height: 2.5em; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation: load7 1.8s infinite ease-in-out; animation: load7 1.8s infinite ease-in-out; } .load7 .loader { color: #ffffff; font-size: 10px; margin: 0.5em auto 5.5em; position: relative; text-indent: -9999em; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } .load7 .loader:before, .load7 .loader:after { content: ''; position: absolute; top: 0; } .load7 .loader:before { left: -3.5em; -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .load7 .loader:after { left: 3.5em; } @-webkit-keyframes load7 { 0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em; } 40% { box-shadow: 0 2.5em 0 0; } } @keyframes load7 { 0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em; } 40% { box-shadow: 0 2.5em 0 0; } } .load8 .loader, .load8 .loader:after { border-radius: 50%; width: 10em; height: 10em; } .load8 .loader { margin: 1em auto; font-size: 10px; position: relative; text-indent: -9999em; border-top: 1.1em solid rgba(255, 255, 255, 0.2); border-right: 1.1em solid rgba(255, 255, 255, 0.2); border-bottom: 1.1em solid rgba(255, 255, 255, 0.2); border-left: 1.1em solid #ffffff; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation: load8 1.1s infinite linear; animation: load8 1.1s infinite linear; } @-webkit-keyframes load8 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes load8 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } shinycssloaders/inst/assets/spinner.js 0000644 0001762 0000144 00000005515 14637401631 017775 0 ustar ligges users (function() { var output_states = {}; function escapeSelector(s) { return s.replace(/([!"#$%&'()*+,-./:;<=>?@\[\\\]^`{|}~])/g, "\\$1"); } function show_spinner(id) { var selector = "#" + escapeSelector(id); var parent = $(selector).closest(".shiny-spinner-output-container"); $(selector).siblings(".load-container, .shiny-spinner-placeholder").removeClass('shiny-spinner-hidden'); if (parent.hasClass("shiny-spinner-hideui")) { $(selector).siblings(".load-container").siblings('.shiny-bound-output, .shiny-output-error').css('visibility', 'hidden'); // if there is a proxy div, hide the previous output $(selector).siblings(".shiny-spinner-placeholder").siblings('.shiny-bound-output, .shiny-output-error').addClass('shiny-spinner-hidden'); } } function hide_spinner(id) { var selector = "#" + escapeSelector(id); var parent = $(selector).closest(".shiny-spinner-output-container"); $(selector).siblings(".load-container, .shiny-spinner-placeholder").addClass('shiny-spinner-hidden'); if (parent.hasClass("shiny-spinner-hideui")) { $(selector).siblings(".load-container").siblings('.shiny-bound-output').css('visibility', 'visible'); // if there is a proxy div, show the previous output in case it was hidden $(selector).siblings(".shiny-spinner-placeholder").siblings('.shiny-bound-output').removeClass('shiny-spinner-hidden'); } } function update_spinner(id) { if (!(id in output_states)) { show_spinner(id); } if (output_states[id] <= 0) { show_spinner(id); } else { hide_spinner(id); } } $(document).on('shiny:bound', function(event) { var id = event.target.id; if (id === undefined || id == "") { return; } /* if not bound before, then set the value to 0 */ if (!(id in output_states)) { output_states[id] = 0; } update_spinner(id); }); /* When recalculating starts, show the spinner container & hide the output */ $(document).on('shiny:outputinvalidated', function(event) { var id = event.target.id; if (id === undefined) { return; } output_states[id] = 0; update_spinner(id); }); /* Allow the user to manually show the spinner */ Shiny.addCustomMessageHandler('shinycssloaders.show_spinner', function(params) { output_states[params.id] = 0; update_spinner(params.id); }); /* When new value or error comes in, hide spinner container (if any) & show the output */ $(document).on('shiny:value shiny:error', function(event) { var id = event.target.id; if (id === undefined) { return; } output_states[id] = 1; update_spinner(id); }); /* Allow the user to manually hide the spinner */ Shiny.addCustomMessageHandler('shinycssloaders.hide_spinner', function(params) { output_states[params.id] = 1; update_spinner(params.id); }); }()); shinycssloaders/inst/examples/ 0000755 0001762 0000144 00000000000 14637401631 016267 5 ustar ligges users shinycssloaders/inst/examples/demo/ 0000755 0001762 0000144 00000000000 14637401631 017213 5 ustar ligges users shinycssloaders/inst/examples/demo/ui.R 0000644 0001762 0000144 00000010004 14637401631 017746 0 ustar ligges users library(shiny) share <- list( title = "{shinycssloaders} package", url = "https://daattali.com/shiny/shinycssloaders-demo/", image = "https://daattali.com/shiny/img/shinycssloaders.png", description = "Add loading animations to a Shiny output while it's recalculating", twitter_user = "daattali" ) fluidPage( shinyjs::useShinyjs(), title = paste0("{shinycssloaders} package ", as.character(packageVersion("shinycssloaders"))), tags$head( includeCSS(file.path('www', 'style.css')), # Favicon tags$link(rel = "shortcut icon", type="image/x-icon", href="https://daattali.com/shiny/img/favicon.ico"), # Facebook OpenGraph tags tags$meta(property = "og:title", content = share$title), tags$meta(property = "og:type", content = "website"), tags$meta(property = "og:url", content = share$url), tags$meta(property = "og:image", content = share$image), tags$meta(property = "og:description", content = share$description), # Twitter summary cards tags$meta(name = "twitter:card", content = "summary_large_image"), tags$meta(name = "twitter:site", content = paste0("@", share$twitter_user)), tags$meta(name = "twitter:creator", content = paste0("@", share$twitter_user)), tags$meta(name = "twitter:title", content = share$title), tags$meta(name = "twitter:description", content = share$description), tags$meta(name = "twitter:image", content = share$image) ), shinydisconnect::disconnectMessage2(), div( id = "header", div(id = "pagetitle", "{shinycssloaders} package" ), div(id = "subtitle", "Add loading animations to a Shiny output while it's recalculating"), div(id = "subsubtitle", "Maintained by", tags$a(href = "https://deanattali.com/", "Dean Attali"), HTML("•"), "Code", tags$a(href = "https://github.com/daattali/shinycssloaders", "on GitHub"), HTML("•"), tags$a(href = "https://github.com/sponsors/daattali", "Support my work"), "鉂" ) ), fluidRow( column( 3, id = "params", selectInput("spinner_type", NULL, c("Spinner on plot output" = "output", "Spinner on entire page" = "page")), conditionalPanel( "input.spinner_type == 'page'", colourpicker::colourInput("bg", "Background", "#222222DD", showColour = "background", allowTransparent = TRUE), ), selectInput("type", "Spinner type", c("