change fileinput progress bar color to gradient in R shiny

Question

Having trouble for adding a gradient color to my fileinput progress bar.

Right now, I was able to change the color of the progress bar from a regular blue to something else using the code provided here. Colour of progress bar in fileInput -- Shiny

ui <- fluidPage(

    tags$head(tags$style(".progress-bar{background-color:#3c763d;}")),

    fileInput(inputId = "fileInp", label = "Input file:",multiple = FALSE,
               accept = c(
                 "text/csv",
                 "text/comma-separated-values,text/plain",
                 ".csv"))

  )


  server <- function(input, output){


  }

  shinyApp(ui=ui, server=server)


##also tried replacing background color with code from https://www.w3schools.com/css/css3_gradients.asp but no luck :


  background-color: linear-gradient(to right, red , yellow);

However, what I want is to have gradient just like this https://i.sstatic.net/43pj9.jpg

Answer 1

To set a gradient in CSS, the property is background-image, not background-color. You also have to set the background-size to auto, otherwise it is set to 40px 40px and the progress bar is striped. Here is the CSS:

  tags$head(
    tags$style(
      ".progress-bar {
          background-image: linear-gradient(to right, red , yellow) !important;
          background-size: auto !important;
      }")
  )