在Shiny进度栏中覆盖CSS

Question

I am trying to understand why there is a gray background in my progress bar (created using timer.js).

I've tried changing the background-color, background-style to none or #FFFFFF, but the gray background is still there.

server.R

function(input, output, session) {
  mylevels <- reactive({
    Sys.sleep(100)
    input$num_levels
  })
  output$out <- renderText({
      return(paste0(mylevels()," is selected.."))
  })
}

ui.R:

library("shinythemes")
fluidPage(theme = shinytheme("spacelab"),

navbarPage("Test", id = "allResults",           
    tabPanel(value ='inputParam', title = 'User Actions',
        sidebarLayout(
          sidebarPanel(
            # Show Timer
            conditionalPanel("updateBusy() || $('html').hasClass('shiny-busy')",
                id='progressIndicator',
                "Calculation in progress ....\n",
                div(class='progress',includeHTML("timer.js"))
            ),

            tags$head(tags$style(type="text/css",
                '#progressIndicator {',
                '  position: fixed; bottom: 15px; right: 15px; width: 225px; height: 70px;',
                '  padding: 8px; border: 0.5px dotted #CCC; border-radius: 8px; ',
                '}'
            )),

            numericInput("num_levels", label = "", value = 3)
          ),
          mainPanel(
            textOutput('out')
          )
        )
    )
))

 <script type="text/javascript"> var wasBusy = false; var elapsedTimer = null; var startTime = null; function updateBusy() { var isBusy = $('html').hasClass('shiny-busy'); if (isBusy && !wasBusy) { startTime = new Date().getTime(); elapsedTimer = setInterval(function() { var millisElapsed = new Date().getTime() - startTime; $('.progress').text(Math.round(millisElapsed/1000) + ' seconds have elapsed'); }, 1000); } else if (!isBusy && wasBusy) { clearInterval(elapsedTimer); } wasBusy = isBusy; } </script> 

Answer 1

将以下内容添加到ui.r text/css样式标签中：

.progress {background:#FFFFFF; box-shadow:none;}