shinycssloaders/ 0000755 0001762 0000144 00000000000 13710050063 013462 5 ustar ligges users shinycssloaders/NAMESPACE 0000644 0001762 0000144 00000000105 13710044442 014701 0 ustar ligges users # Generated by roxygen2: do not edit by hand
export(withSpinner)
shinycssloaders/LICENSE 0000644 0001762 0000144 00000000052 13706431701 014473 0 ustar ligges users YEAR: 2020
COPYRIGHT HOLDER: Dean Attali shinycssloaders/README.md 0000644 0001762 0000144 00000010170 13706453716 014761 0 ustar ligges users # {shinycssloaders} - Add loading animations to a Shiny output while it's recalculating
[](https://cran.r-project.org/package=shinycssloaders)
[](https://travis-ci.org/daattali/shinycssloaders)
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 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](https://daattali.com/shiny/shinycssloaders-demo) online for examples.
# Table of contents
- [Example](#example)
- [How to use](#usage)
- [Installation](#install)
- [Features](#features)
Example
For interactive examples and to see some of the features, [check out the demo app](https://daattali.com/shiny/shinycssloaders-demo/).
Below is a simple example of what {shinycssloaders} looks like:

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:
```
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)
```
Installation
To install the stable CRAN version:
```
install.packages("shinycssloaders")
```
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)`.
### Setting spinner parameters globally
If you want all the spinners in your app to have a certain type/size/colour, instead of specifying them in each call to `withSpinner()`, you can set them globally using the `spinner.type`, `spinner.color`, `spinner.size` R options. For example, setting `options(spinner.color="#0dc5c1")` will cause all your spinners to use that colour.
### 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), 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.
### 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.
### Background colour
Spinner types 2 and 3 require you to specify a background colour. It's recommended to use a colour that matches the background colour of the output's container, so that the spinner will "blend in".
## Credits
The 8 built-in animations are taken from [https://projects.lukehaas.me/css-loaders/](https://projects.lukehaas.me/css-loaders/).
The package was originally created by [Andrew Sali](https://github.com/andrewsali).
shinycssloaders/man/ 0000755 0001762 0000144 00000000000 13706357654 014262 5 ustar ligges users shinycssloaders/man/shinycssloaders.Rd 0000644 0001762 0000144 00000001335 13706430317 017754 0 ustar ligges users % Generated by roxygen2: do not edit by hand
% Please edit documentation in R/shinycssloaders-package.r
\docType{package}
\name{shinycssloaders}
\alias{shinycssloaders}
\title{shinycssloaders}
\description{
Add automatic loading animations to your Shiny outputs (e.g. plots, tables) by adding a single function call
around the Shiny output function. Animations automatically show/hide when the output
is recalculating/recalculated. You can use your own custom image, or choose from 8 different types of
built-in animations, as well customize the color and size of the built-in animations.
}
\details{
For further reference on how to use the package, please refer to \url{https://github.com/daattali/shinycssloaders}
}
shinycssloaders/man/withSpinner.Rd 0000644 0001762 0000144 00000005745 13706430317 017062 0 ustar ligges users % Generated by roxygen2: do not edit by hand
% Please edit documentation in R/withSpinner.R
\name{withSpinner}
\alias{withSpinner}
\title{Add a spinner that shows when an output is recalculating}
\usage{
withSpinner(
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 = FALSE,
proxy.height = NULL,
id = NULL,
image = NULL,
image.width = NULL,
image.height = NULL,
hide.ui = TRUE
)
}
\arguments{
\item{ui_element}{A UI element that should be wrapped with a spinner when the corresponding output is being calculated.}
\item{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 \code{image} parameter.}
\item{color}{The color of the spinner in hex format. Ignored if \code{image} is used.}
\item{size}{The size of the spinner, relative to its default size (default is 1, a size of 2 means twice as large). Ignored if \code{image} is used.}
\item{color.background}{For certain spinners (type 2-3), you will need to specify the background color of the spinner. Ignored if \code{image} is used.}
\item{custom.css}{Set to \code{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 \code{image} is used.}
\item{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 \code{hide.ui} is set to \code{FALSE}.}
\item{id}{The HTML ID to use for the spinner. If you don't provide one, it will be generated automatically.}
\item{image}{The path or URL of the image to use if you want to use a custom image instead of a built-in spinner.}
\item{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 \code{image}.}
\item{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 \code{image}.}
\item{hide.ui}{By default, while an output is recalculating, the output UI is hidden and the spinner is visible instead.
Setting \code{hide.ui = FALSE} will result in the spinner showing up on top of the previous output UI.}
}
\description{
Add a spinner that shows when an output is recalculating
}
\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))
})
}
)
}
}
shinycssloaders/DESCRIPTION 0000644 0001762 0000144 00000003044 13710050063 015171 0 ustar ligges users Package: shinycssloaders
Type: Package
Title: Add Loading Animations to a 'shiny' Output While It's
Recalculating
Version: 1.0.0
Authors@R: c(
person("Andras","Sali",email="andras.sali@alphacruncher.hu",role=c("aut"),comment="Original creator of shinycssloaders package"),
person("Luke","Hass",role=c("ctb","cph"),comment="Author of included CSS loader code"),
person("Dean","Attali",email="daattali@gmail.com",role=c("aut","cre"),comment="Maintainer of shinycssloaders since 2019")
)
Description: 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
.
License: MIT + file LICENSE
URL: https://github.com/daattali/shinycssloaders
BugReports: https://github.com/daattali/shinycssloaders/issues
Depends: R (>= 3.1)
Imports: digest, glue, grDevices, shiny
Suggests: shinydisconnect, shinyjs
RoxygenNote: 7.1.0
Encoding: UTF-8
NeedsCompilation: no
Packaged: 2020-07-28 15:50:54 UTC; D
Author: Andras Sali [aut] (Original creator of shinycssloaders package),
Luke Hass [ctb, cph] (Author of included CSS loader code),
Dean Attali [aut, cre] (Maintainer of shinycssloaders since 2019)
Maintainer: Dean Attali
Repository: CRAN
Date/Publication: 2020-07-28 16:20:03 UTC
shinycssloaders/R/ 0000755 0001762 0000144 00000000000 13706465411 013677 5 ustar ligges users shinycssloaders/R/withSpinner.R 0000644 0001762 0000144 00000014426 13706465411 016343 0 ustar ligges users #' Add a spinner that shows when an output is recalculating
#' @export
#' @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.
#' @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.
#' @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))
#' })
#' }
#' )
#' }
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 = FALSE,
proxy.height = NULL,
id = NULL,
image = NULL, image.width = NULL, image.height = NULL,
hide.ui = TRUE
) {
stopifnot(type %in% 0:8)
if (grepl("rgb", color, fixed = TRUE)) {
stop("Color should be given in hex format")
}
if (is.character(custom.css)) {
stop("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.")
}
# each spinner will have a unique id to allow separate sizing
if (is.null(id)) {
id <- paste0("spinner-", digest::digest(ui_element))
}
if (is.null(image)) {
css_size_color <- shiny::tagList()
if (!custom.css && type != 0) {
if (type %in% c(2, 3) && is.null(color.background)) {
stop("For spinner types 2 & 3 you need to specify manually a background color.")
}
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")
base_css <- ""
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 <- 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; }}"))
css_size_color <- add_style(base_css)
}
}
proxy_element <- get_proxy_element(ui_element, proxy.height, hide.ui)
shiny::tagList(
shiny::singleton(
shiny::tags$head(
shiny::tags$link(rel="stylesheet", href="shinycssloaders-assets/spinner.css"),
shiny::tags$script(src="shinycssloaders-assets/spinner.js")
)
),
if (is.null(image))
shiny::singleton(
shiny::tags$head(
shiny::tags$link(rel="stylesheet", href="shinycssloaders-assets/css-loaders.css")
)
),
if (is.null(image)) css_size_color,
shiny::div(
class = paste(
"shiny-spinner-output-container",
if (hide.ui) "shiny-spinner-hideui" else "",
if (is.null(image)) "" else "shiny-spinner-custom"
),
shiny::div(
class = paste(
"load-container",
"shiny-spinner-hidden",
if (is.null(image)) paste0("load",type)
),
if (is.null(image))
shiny::div(id = id, class = "loader", (if (type == 0) "" else "Loading..."))
else
shiny::tags$img(id = id, src = image, alt = "Loading...", width = image.width, height = image.height)
),
proxy_element,
ui_element
)
)
}
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")
}
}
add_style <- function(x) {
shiny::tags$head(
shiny::tags$style(
shiny::HTML(
x
)
)
)
} shinycssloaders/R/globals.R 0000644 0001762 0000144 00000000255 13650661616 015452 0 ustar ligges users .onLoad <- function(libname, pkgname) {
shiny::addResourcePath(prefix = "shinycssloaders-assets", directoryPath = system.file("assets", package = "shinycssloaders"))
}
shinycssloaders/R/shinycssloaders-package.r 0000644 0001762 0000144 00000001137 13706405324 020667 0 ustar ligges users #' shinycssloaders
#'
#' Add automatic loading animations to your Shiny outputs (e.g. plots, tables) by adding a single function call
#' around the Shiny output function. Animations automatically show/hide when the output
#' is recalculating/recalculated. You can use your own custom image, or choose from 8 different types of
#' built-in animations, as well customize the color and size of the built-in animations.
#'
#' For further reference on how to use the package, please refer to \url{https://github.com/daattali/shinycssloaders}
#'
#' @name shinycssloaders
#' @docType package
NULL
shinycssloaders/NEWS.md 0000644 0001762 0000144 00000004624 13710044400 014564 0 ustar ligges users # 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)
- 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)
- Removed the default value of `proxy.height` parameter to simplify the function documentation
# 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/MD5 0000644 0001762 0000144 00000003150 13710050063 013771 0 ustar ligges users cac0ebe75eef4409afb8f698931e6607 *DESCRIPTION
9ddd06bb65ce3e8cdcc8792902b9102a *LICENSE
22bfb875c6f72c48e7bdd5b5db6052ce *NAMESPACE
1931a3bef379d3b5509e3b135f8dff65 *NEWS.md
cbe45d328c0fda5cbbfccaa90e69699d *R/globals.R
ca396795881fdf8e07217bebdad578a0 *R/shinycssloaders-package.r
5edf36e3f444bb7d9333559d0ce658cb *R/withSpinner.R
c11651d4e367be5b489069585a5cfb9c *README.md
2859f7fe0cf073c30e519acc01f665e6 *inst/assets/css-loaders.css
6ee55e64b2be087ffd29b89232601d3c *inst/assets/spinner.css
595a93e655b754972e363e0dcf04160f *inst/assets/spinner.js
fb1ead66ada60fec8b3b0436d2db1185 *inst/examples/demo/server.R
0e88520ca4b2d3cdc15ef75010b695f8 *inst/examples/demo/ui.R
22d9e69c0ebaff22a24e241a0244532e *inst/examples/demo/www/github-green-right.png
2d8584e19c4f34c793273a72a305a89f *inst/examples/demo/www/header.png
5d9e4a3d6c0ee9e378f0e4872b34564d *inst/examples/demo/www/style.css
0d0345f662a757ef17eef497fa8e83fc *inst/img/custom.gif
5581db33923abc722340bc1cd0fd4004 *inst/img/demo.gif
d781a86c8b24ae0e1f8e354cfcabe36e *inst/loaders-templates/load1.css
a4f24870f10aa98318e496dbe75e288d *inst/loaders-templates/load2.css
49907999d672f5fc14c1c68a7c091466 *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
f29eb650b791871b4fa8e132b07e426e *man/shinycssloaders.Rd
f4e9261bc1930dab39656ce7cc97bd09 *man/withSpinner.Rd
shinycssloaders/inst/ 0000755 0001762 0000144 00000000000 13706414347 014455 5 ustar ligges users shinycssloaders/inst/loaders-templates/ 0000755 0001762 0000144 00000000000 13645366666 020116 5 ustar ligges users shinycssloaders/inst/loaders-templates/load6.css 0000644 0001762 0000144 00000000043 13645366666 021632 0 ustar ligges users #{{id}} {
color: {{color}};
}
shinycssloaders/inst/loaders-templates/load4.css 0000644 0001762 0000144 00000000043 13645366666 021630 0 ustar ligges users #{{id}} {
color: {{color}};
}
shinycssloaders/inst/loaders-templates/load2.css 0000644 0001762 0000144 00000000154 13645366666 021631 0 ustar ligges users #{{id}} {
color: {{color}};
}
#{{id}}:before, #{{id}}:after {
background: {{color.background}};
}
shinycssloaders/inst/loaders-templates/load3.css 0000644 0001762 0000144 00000001011 13645366666 021623 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/load1.css 0000644 0001762 0000144 00000000152 13645366666 021626 0 ustar ligges users #{{id}}, #{{id}}:before, #{{id}}:after {
background: {{color}};
}
#{{id}} {
color: {{color}};
}
shinycssloaders/inst/loaders-templates/load7.css 0000644 0001762 0000144 00000000043 13645366666 021633 0 ustar ligges users #{{id}} {
color: {{color}};
}
shinycssloaders/inst/loaders-templates/load5.css 0000644 0001762 0000144 00000013772 13645366666 021646 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 13645366666 021631 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/examples/ 0000755 0001762 0000144 00000000000 13706364321 016267 5 ustar ligges users shinycssloaders/inst/examples/demo/ 0000755 0001762 0000144 00000000000 13706465743 017225 5 ustar ligges users shinycssloaders/inst/examples/demo/server.R 0000644 0001762 0000144 00000002151 13706465752 020655 0 ustar ligges users server <- function(input, output, session) {
plotnum <- reactiveVal(0)
output$show_example <- renderUI({
if (input$type == "custom") {
params <- list(
ui_element = plotOutput(paste0("example", plotnum())),
image = input$image,
image.width = if (input$image_size_default) NULL else input$image.width,
image.height = if (input$image_size_default) NULL else input$image.height
)
} else {
params <- list(
ui_element = plotOutput(paste0("example", plotnum())),
type = as.numeric(input$type),
color = input$col,
size = input$size,
color.background = "#fafafa"
)
}
do.call(shinycssloaders::withSpinner, params)
})
observeEvent(input$update, ignoreNULL = FALSE, {
plotnum(plotnum() + 1)
output[[paste0("example", plotnum())]] <- renderPlot({
bg <- par(bg = "#fafafa")
shinyjs::disable("params")
on.exit(shinyjs::enable("params"))
Sys.sleep(isolate(input$time))
plot(runif(10), main = "Random Plot")
bg <- par(bg = bg)
})
})
}
shinycssloaders/inst/examples/demo/www/ 0000755 0001762 0000144 00000000000 13706465411 020041 5 ustar ligges users shinycssloaders/inst/examples/demo/www/github-green-right.png 0000644 0001762 0000144 00000016754 13652322301 024245 0 ustar ligges users PNG
IHDR QO tEXtSoftware Adobe ImageReadyqe<