waiter icon indicating copy to clipboard operation
waiter copied to clipboard

Increase width of Hostess

Open FredericKruger opened this issue 3 years ago • 2 comments

Hello,

I was looking for a way to increase the side of the loading bar in the Hostess. I read the documentation and tried to apply the correct CSS tag, but had no success. Could you provide an example ?

Thank you very much Frederic

FredericKruger avatar Jan 11 '21 13:01 FredericKruger

The hostess uses progress.js, there is some doc on the CSS.

The app below shows a larger bar.

library(shiny)
library(waiter)

ui <- fluidPage(
  use_waiter(),
  use_hostess(),
  tags$head(
    tags$style(
      ".ldBar path.mainline{
        stroke-width: 25
      }"
    )
  ),
  waiter_show_on_load(
    color = "#f7fff7",
    hostess_loader(
      "loader", 
      text_color = "black",
      center_page = TRUE
    )
  )
)

server <- function(input, output){
  hostess <- Hostess$new("loader")

  for(i in 1:10){
    Sys.sleep(runif(1) / 2)
    hostess$set(i * 10)
  }
  
  waiter_hide()
}

shinyApp(ui, server)

JohnCoene avatar Jan 11 '21 15:01 JohnCoene

Hi John, thank you for your answer. That piece of code worked, but I'm trying to increase the size of the circle preset loader. I tried using the width:25% as in the documentation, but had no luck so far. I do not manage to get the label to be inside the circle. It is always below. Your help would be apreciated.

Frederic

FredericKruger avatar Jan 11 '21 21:01 FredericKruger