Description Usage Arguments Details Value Examples
CSS loaders can improve user experience by adding a small animation icon to a HTML element. spsComps provides you 12 different looking CSS loaders. Unlike other Shiny packages, you have full control of the CSS loader here, like position, color, size, opacity, etc.
1 2 3 4 5 6 7 8 9 10 11 12 |
type |
string, one of "circle", "dual-ring", "facebook", "heart", "ring", "roller", "default", "ellipsis", "grid", "hourglass", "ripple", "spinner", "gif", default is "default". |
src |
string, online URL or local path of the gif animation file if you would like to upload your own loader. |
id |
string, optional, ID for the component, if not given, a random ID will be given. |
height |
string, pixel, like "10px"; or (r)em, "1.5rem", "1.5em". Default is "1.5rem". |
width |
string, default is the same as |
color |
string, any valid CSS color name, or hex color code |
opacity |
number, between 0-1 |
inline |
bool, do you want the loader be inline? This is useful to turn on if you want to add the loader to a shiny::actionButton, so the loader and button label will be on the same line. See examples. |
is_icon |
bool, default uses the HTML |
... |
other shiny tags or HTML attributes you want to add to the loader. |
For most modern web apps, including Shiny, 1rem = 10px
returns a css loader component.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | if (interactive()){
library(shiny)
heights <- paste0(c(1.5, 3, 5, 8, 10, 15, 20), "rem")
colors <- list(
colorRampPalette(c("#00d2ff", "#3a7bd5"))(7),
colorRampPalette(c("#59C173", "#a17fe0", "#5D26C1"))(7),
colorRampPalette(c("#667db6", "#0082c8", "#5D26C1", "#667db6"))(7),
colorRampPalette(c("#f2709c", "#ff9472"))(7),
colorRampPalette(c("#FC5C7D", "#6A82FB"))(7),
colorRampPalette(c("#4568DC", "#B06AB3"))(7)
)
types <- c("circle", "dual-ring", "facebook", "heart",
"ring", "roller", "default", "ellipsis",
"grid", "hourglass", "ripple", "spinner")
ui <- fluidPage(
lapply(seq_along(types), function(i){
div(
h4(types[i]), br(),
lapply(1:7, function(x){
cssLoader(
types[i], height = heights[x],
color = colors[[if(i > 6) i - 6 else i]][x],
inline = TRUE
)
}),
br()
)
})
)
server <- function(input, output, session) {}
shinyApp(ui, server)
}
# use with buttons
if (interactive()){
library(shiny)
ui <- fluidPage(
actionButton(
"btn-a", "",
## `inline = TRUE` is important if you want loader and
## text in the same line.
icon = cssLoader(is_icon = TRUE, inline = TRUE, color = "#3a7bd5"
)
),
actionButton(
"btn-b", "Loading",
icon = cssLoader(type = "hourglass", is_icon = TRUE, color = "#667db6", inline = TRUE)
)
)
server <- function(input, output, session) {}
shinyApp(ui, server)
}
# use your own
if (interactive()){
library(shiny)
spinner <- "https://github.com/lz100/spsComps/blob/master/examples/demo/www/spinner.gif?raw=true"
eater <- "https://github.com/lz100/spsComps/blob/master/examples/demo/www/bean_eater.gif?raw=true"
ui <- fluidPage(
cssLoader(
"gif", spinner, height = "50px"
),
cssLoader(
"gif", spinner, height = "100px"
),
cssLoader(
"gif", eater, height = "150px"
),
cssLoader(
"gif", eater, height = "200px"
),
actionButton(
"btn-custom1", "",
icon = cssLoader(
type = "gif", src = spinner,
is_icon = TRUE, inline = TRUE
)
),
actionButton(
"btn-custom2", "A button",
icon = cssLoader(
type = "gif", src = eater,
is_icon = TRUE, inline = TRUE
)
)
)
server <- function(input, output, session) {}
shinyApp(ui, server)
}
|
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.