如何在R Shiny中居中进度条并调整消息框大小？

Shiny的withProgress函数本身没有直接设置位置和尺寸的参数，要实现进度条居中、调整大小，需要通过自定义CSS样式覆盖默认的进度条样式。

实现步骤 #

1. 在UI中添加自定义CSS，修改进度条容器和进度条的样式
2. 正常使用withProgress函数即可应用新样式

完整示例代码 #

library(shiny)

ui <- fluidPage(
  tags$head(
    tags$style(HTML("
      /* 调整进度条容器的位置和宽度 */
      .shiny-progress {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 400px; /* 自定义容器宽度 */
        margin: 0;
      }
      
      /* 调整进度条的高度 */
      .shiny-progress .progress-bar {
        height: 20px; /* 自定义进度条高度 */
      }
      
      /* 可选：调整提示文字的样式 */
      .shiny-progress .progress-text {
        font-size: 16px;
      }
    "))
  ),
  actionButton("run", "开始运行任务")
)

server <- function(input, output, session) {
  observeEvent(input$run, {
    withProgress(
      message = 'Running ......',
      detail = 'This may take a while.',
      value = 0,
      {
        # 模拟长时间运行的任务
        for (i in 1:10) {
          incProgress(0.1)
          Sys.sleep(0.5)
        }
      }
    )
  })
}

shinyApp(ui, server)

样式说明 #

• position: fixed：让进度条固定在视窗中，不会随页面滚动移动
• top: 50%; left: 50%; transform: translate(-50%, -50%)：通过位移实现完美居中
• width: 400px：设置进度条容器的整体宽度，可根据需求调整
• .progress-bar下的height：单独调整进度条的高度
• 额外的.progress-text样式可以调整提示文字的大小，按需添加

你可以根据实际需求修改CSS中的数值，实现符合自己UI风格的进度条效果。

内容的提问来源于stack exchange，提问作者Jian Zhang