Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Increase width of Hostess #78

Open
FredericKruger opened this issue Jan 11, 2021 · 2 comments
Open

Increase width of Hostess #78

FredericKruger opened this issue Jan 11, 2021 · 2 comments
Labels
bug Something isn't working

Comments

@FredericKruger
Copy link

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

@JohnCoene
Copy link
Owner

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)

@FredericKruger
Copy link
Author

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

@JohnCoene JohnCoene added the bug Something isn't working label Sep 2, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants