반짝이는 진행 표시 줄의 CSS 재정의

Question

진행률 표시 줄에 회색 배경이있는 이유를 알고 싶습니다 (timer.js를 사용하여 생성).

background-color, background-style을 none 또는 #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

톤 추가 그는 ui.r에 text/css 스타일 태그에 다음

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