rshinyprogress-bar

Put the progress bar in the center and change the size of the message box in R Shiny


I am writng a R shiny web application. I am looking for a way to put the progress bar in the center of the webpage and adjust the size the of the bar. The function I used is "withProgress", but I have the trouble to find the parameters for the location and size. Any suggestions?

withProgress(
      message = 'Running ......',
      detail = 'This may take a while.',
      value = 0,
      {
        ......
      }
    )

Solution

  • Target the progress bar container (the notification panel) with some CSS:

    #shiny-notification-panel {
        /* Position bottom-right corner in the center of the screen. */
        position: fixed;
        bottom: 50%;
        right: 50%;
        /* Shift the position to center alignment. */
        transform: translate(50%, 50%);
        width: 700px;
    }
    

    In an app:

    library(shiny)
    
    ui <- fluidPage(
      tags$style(HTML(r"(
        #shiny-notification-panel {
          position: fixed;
          bottom: 50%;
          right: 50%;
          transform: translate(50%, 50%);
          width: 700px;
        }
      )")),
      titlePanel("Progress"),
      textOutput("progress"),
    )
    
    server <- function(input, output, session) {
      output$progress <- renderText({
        withProgress(
          message = 'Processing...',
          detail = 'This may take a while...',
          value = 0,
          Sys.sleep(1000)
        )
        "Done!"
      })
    }
    
    shinyApp(ui, server)