在闪亮的进度条中覆盖CSS

Question

我想了解为什么我的进度条中存在灰色背景（使用timer.js创建）。

我尝试将背景颜色，背景样式更改为无或#FFFFFF，但灰色背景仍然存在。

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

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

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