带有CSS的闪亮进度栏

时间:2018-08-13 14:23:38

标签: css r shiny progress-bar progress

在以下脚本中,我尝试使用CSS更改默认的Shiny进度栏:

server <- function(input, output) {
  output$plot <- renderPlot({
    input$goPlot

    dat <- data.frame(x = numeric(0), y = numeric(0))

    withProgress(message = 'Making plot', value = 0, {
      n <- 10

      for (i in 1:n) {
        dat <- rbind(dat, data.frame(x = rnorm(1), y = rnorm(1)))
        incProgress(1/n, detail = paste("Doing part", i))
        Sys.sleep(0.1)
      }
    })

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

ui <- shinyUI(basicPage(
   tags$style(type = 'text/css', '.shiny-progress .progress-text { color: #020202; font-size: 30px; background-color: #FF0000; }'),

   plotOutput('plot', width = "300px", height = "300px"),
   actionButton('goPlot', 'Go plot')
))

shinyApp(ui = ui, server = server)

我尝试通过此行更改颜色,字体大小和背景色:

tags$style(type = 'text/css', '.shiny-progress .progress-text { color: #020202; font-size: 30px; background-color: #FF0000; }'),

完全遵循Winston Chang在https://groups.google.com/forum/#!topic/shiny-discuss/aFJTOLhld3U的建议并咨询:https://github.com/rstudio/shiny/blob/515a67a/inst/www/shared/shiny.css#L94-L114

但是无论我如何尝试,都不会改变进度栏。有人有什么主意吗?例如。我在使用正确的CSS选择器来“连接”闪亮的进度栏吗?

1 个答案:

答案 0 :(得分:1)

如果要使用自定义CSS,则必须设置选项style="old"

withProgress(message = 'Making plot', value = 0, {
  n <- 10
  for (i in 1:n) {
    dat <- rbind(dat, data.frame(x = rnorm(1), y = rnorm(1)))
    incProgress(1/n, detail = paste("Doing part", i))
    Sys.sleep(0.1)
  }
}, style="old")