Change the style of the message box generated by withProgress()

Question

The withProgress() function can generate a message box indicating the shiny app is running. But the message is at the top-right conner of the browser with a small text size, which makes the message not that eye-catching. So I wonder is there any way that I could change the style of this box, so that the message can be more expressive.

Answer 1

I couldn't quite figure it out from the answers here, but a more complete answer provided in this question got me there:

library(shiny)

ui <- fluidPage(
  tags$head(tags$style(
      HTML(".shiny-notification {position:fixed;top: 30%;left: 0%;right: 0%;}"))),
  actionButton(inputId = "go", label = "Launch long calculation")
)

server <- function(input, output, session) {
  observeEvent(input$go,{
    withProgress(message = "doing task 1",value = 0,{
      Sys.sleep(1.5)#task 1
      setProgress(0.3,message = "doing task 2",detail = "\n task 1 done")
      Sys.sleep(1.5)#task 2
      setProgress(0.6,message = "doing task 3",detail = "\n task 1 done \n task 2 done")
      Sys.sleep(1.5)#task 3
      setProgress(0.9,message = "Almost done",detail = "\n task 1 done \n task 2 done \n task 3 done")
      Sys.sleep(1.5)
    })
  })
}

shinyApp(ui, server)

Answer 2

On newer versions of Shiny, the progress bar shows on a shiny notification you can style modifying the following CSS class (by using includeCSS() or inside ui.r using something like tags$head(tags$style(...)):

.shiny-notification{
  position: fixed;
  top: 33%;
  left: 33%;
  right: 33%;
}