dreamRs / shinybusy

Minimal busy indicator for Shiny apps
https://dreamrs.github.io/shinybusy/
Other
138 stars 16 forks source link

add_busy_spinner center alignment or "full screen" semi transparent background #21

Closed ferguskeatinge closed 2 years ago

ferguskeatinge commented 2 years ago

Is there a way to align the busy spinner to the center of the screen?

OR (even better), add a method for changing the background color of full screen positioning, to be semi transparent (thus allowing user to still see the UI.

Thanks.

pvictor commented 2 years ago

Hello, You can customize the overlay with some CSS, for example change the opacity and background color with this in your UI :

tags$style(".shinybusy-overlay {opacity: 0.7; background-color: #7c7c7c;}")

Full example :

library(shiny)
library(shinybusy)

ui <- fluidPage(

  tags$style(".shinybusy-overlay {opacity: 0.7; background-color: #7c7c7c;}"),
  add_busy_spinner(spin = "cube-grid", position = "full-page"),

  headerPanel('Iris k-means clustering'),

  sidebarLayout(
    sidebarPanel(
      selectInput('xcol', 'X Variable', names(iris)),
      selectInput('ycol', 'Y Variable', names(iris),
                  selected=names(iris)[[2]]),
      numericInput('clusters', 'Cluster count', 3,
                   min = 1, max = 9),
      actionButton("sleep", "Long calculation")
    ),
    mainPanel(
      plotOutput('plot1')
    )
  )
)

server <- function(input, output, session) {

  selectedData <- reactive({
    iris[, c(input$xcol, input$ycol)]
  })

  clusters <- reactive({
    kmeans(selectedData(), input$clusters)
  })

  output$plot1 <- renderPlot({
    palette(c("#E41A1C", "#377EB8", "#4DAF4A", "#984EA3",
              "#FF7F00", "#FFFF33", "#A65628", "#F781BF",
              "#999999"))

    par(mar = c(5.1, 4.1, 0, 1))
    plot(selectedData(),
         col = clusters()$cluster,
         pch = 20, cex = 3)
    points(clusters()$centers, pch = 4, cex = 4, lwd = 4)
  })

  observeEvent(input$sleep, {
    Sys.sleep(50)
  })

}

shinyApp(ui, server)
13479776 commented 2 years ago

Hello,

Is it possible to change the opacity and background color for show_modal_spinner? the code tags$style(".shinybusy-overlay {opacity: 0.7; background-color: #7c7c7c;}") did not work for show_modal_spinner. by the way, i use the shinydashboard.

Hees

pvictor commented 2 years ago

Hello, @13479776 can you open a new issue ? (with a small example?) I'm closing this one since I think it's settled.

Victor