Overriding CSS in Shiny progress bar

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

Add the following to your text/css style tag in ui.r:

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