Shiny: Progress bars for indeterminate time

Created on 7 Oct 2014  ·  3Comments  ·  Source: rstudio/shiny

Sometimes there isn't a way to estimate execution time. For these cases, it would be useful to have either a radial progress indicator, or a moving hatched bar.
https://groups.google.com/d/msg/shiny-discuss/a3TcQ2C_hS0/3H4zocpRD0AJ

book

Most helpful comment

Another possibility is to simply make the stripes more visible and set the progress value to 1:

server <- function(input, output) {
  output$plot <- renderPlot({
    input$goPlot # Re-run when button is clicked

    dat <- data.frame(x = rnorm(10), y = rnorm(10))

    withProgress(message = 'Making plot', value = 1, {
      Sys.sleep(20)
    })

    plot(dat$x, dat$y)
  })
}

ui <- shinyUI(basicPage(
  tags$head(tags$style(HTML("
    .progress-striped .bar {
      background-color: #149bdf;
      background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.6)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.6)), color-stop(0.75, rgba(255, 255, 255, 0.6)), color-stop(0.75, transparent), to(transparent));
      background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.6) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.6) 75%, transparent 75%, transparent);
      background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.6) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.6) 75%, transparent 75%, transparent);
      background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.6) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.6) 75%, transparent 75%, transparent);
      background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.6) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.6) 75%, transparent 75%, transparent);
      -webkit-background-size: 40px 40px;
         -moz-background-size: 40px 40px;
           -o-background-size: 40px 40px;
              background-size: 40px 40px;
    }
  "))),
  plotOutput('plot', width = "300px", height = "300px"),
  actionButton('goPlot', 'Go plot')
))

shinyApp(ui = ui, server = server)

All 3 comments

Another possibility is to simply make the stripes more visible and set the progress value to 1:

server <- function(input, output) {
  output$plot <- renderPlot({
    input$goPlot # Re-run when button is clicked

    dat <- data.frame(x = rnorm(10), y = rnorm(10))

    withProgress(message = 'Making plot', value = 1, {
      Sys.sleep(20)
    })

    plot(dat$x, dat$y)
  })
}

ui <- shinyUI(basicPage(
  tags$head(tags$style(HTML("
    .progress-striped .bar {
      background-color: #149bdf;
      background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.6)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.6)), color-stop(0.75, rgba(255, 255, 255, 0.6)), color-stop(0.75, transparent), to(transparent));
      background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.6) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.6) 75%, transparent 75%, transparent);
      background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.6) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.6) 75%, transparent 75%, transparent);
      background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.6) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.6) 75%, transparent 75%, transparent);
      background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.6) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.6) 75%, transparent 75%, transparent);
      -webkit-background-size: 40px 40px;
         -moz-background-size: 40px 40px;
           -o-background-size: 40px 40px;
              background-size: 40px 40px;
    }
  "))),
  plotOutput('plot', width = "300px", height = "300px"),
  actionButton('goPlot', 'Go plot')
))

shinyApp(ui = ui, server = server)

I have tried taking on the suggestions above...but it didn't seem to work...

Please see below for my attempt, any help would be much appreciated.

http://stackoverflow.com/questions/38339593/shiny-loading-bar-for-htmlwidgets

Would it also be possible to use something like this?...

https://gist.github.com/eesur/cf81a5ea738f85732707

I think you could use https://getbootstrap.com/docs/3.4/components/#progress-animated.

@jcheng5 suggested activating "indeterminate mode" by setting value = NA. But given that this is called "animated" maybe it would be more flexible to add an animated parameter, and so you could do withProgress(..., value = 1, animate = TRUE)

Was this page helpful?
0 / 5 - 0 ratings

Related issues

zji90 picture zji90  ·  5Comments

mdec picture mdec  ·  5Comments

daattali picture daattali  ·  3Comments

Stophface picture Stophface  ·  3Comments

hlherrera picture hlherrera  ·  5Comments