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

问题

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 and the position of this box, so that the message can be more expressive.

Here is a part of my code:

output$plot <- renderPlot({ 
 if (input$button){

 withProgress(
              distributionPolygon(data(),unit="years",colors=c("black","gray30","gray50","gray70","blue3","dodgerblue3","steelblue1","lightskyblue1","red4","indianred3","orange","seagreen4"),main=title(),tpsMax=input$months),
              message = 'Loading...',
              detail = ''
              )
      }
   })

回答1:

Update

This is an updated version so you can refer to this example, the example is taken from here

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

    # Create 0-row data frame which will be used to store data
    dat <- data.frame(x = numeric(0), y = numeric(0))

    withProgress(message = 'Making plot', value = 0, {
      # Number of times we'll go through the loop
      n <- 10

      for (i in 1:n) {
        # Each time through the loop, add another row of data. This is
        # a stand-in for a long-running computation.
        dat <- rbind(dat, data.frame(x = rnorm(1), y = rnorm(1)))

        # Increment the progress bar, and update the detail text.
        incProgress(1/n, detail = paste("Doing part", i))

        # Pause for 0.1 seconds to simulate a long computation.
        Sys.sleep(0.1)
      }
    })

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

ui <- shinyUI(basicPage(
  plotOutput('plot', width = "300px", height = "300px"),
  actionButton('goPlot', 'Go plot')
))

shinyApp(ui = ui, server = server)

Original Post

This is related to your previous question too. So you would probably want to change cssstyle of the progress bar. Feel free to play around and do more research if you want a fancier css progress bar.

Note: during the calculations I have also disabled the button so users do not click the button multiple times forcing the computation to repeat itself. You can further look into shinyjs for more information. As you can see in the image below during the computation that button is disabled. It will be back up once it is finished

rm(list = ls())
library(shiny)
library(shinyIncubator)
library(shinyjs)

server <- function(input, output, session) {
  observe({
    if(input$aButton==0) return(NULL)
    withProgress(session, min=1, max=15, expr={
      disable("aButton")
      for(i in 1:20) {
        setProgress(message = 'Finished...',detail = paste0('Number ',i, ':20'))
        Sys.sleep(0.1)
      }
      Sys.sleep(1.5)
    })
    enable("aButton")
  })
}

ui <- fluidPage(
  tags$head(tags$style(".shiny-progress {top: 50% !important;left: 50% !important;margin-top: -100px !important;margin-left: -250px !important; color: blue;font-size: 20px;font-style: italic;}")),
  sidebarPanel(actionButton("aButton", "Let's go!"), width=2),
  useShinyjs(),
  mainPanel(progressInit())
)

shinyApp(ui = ui, server = server)

回答2:

Easy way: You can just include the HTML function tags$head() in the ui to overlay the progress bar. Since it's a notification it can be called with .shiny-notification. Simplest way is to put this line somewhere in the ui and adjust the positions (and other CSS related parameters, see here.

ui <- fluidPage(
  titlePanel(),

  tags$head(tags$style(".shiny-notification {position: fixed; top: 60% ;left: 50%)),

  sidebarPanel()
  mainPanel()
         )

回答3:

Try modifying the CSS style shiny-notification. You can check out this post.

来源：https://stackoverflow.com/questions/35037230/change-style-and-position-of-the-message-box-generated-by-withprogress

标签

Shiny

message