Shiny中如何为shinydashboard头部switchInput添加进度提示组件

实现思路 #

shinyWidgets提供的progressBar默认样式是为页面主体区域设计的，无法适配dashboardHeader导航栏的窄高布局，因此我们自定义轻量进度条嵌入头部leftUi区域，配合shinyjs控制显示、进度更新和隐藏，完全适配头部布局。

完整可运行代码 #

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(shinyWidgets)
library(shinyjs)

ui <- dashboardPage(skin = 'blue', 
  # 启用shinyjs用于DOM操作
  useShinyjs(),
  shinydashboardPlus::dashboardHeader(title = 'Example',
    leftUi = tagList(
      switchInput(inputId = 'swtLabels', label = 'Labels', value = TRUE,
                  onLabel = 'Label 1', offLabel = 'Label 2',
                  onStatus = 'info', offStatus = 'info', size = 'mini', 
                  handleWidth = 230),
      # 自定义头部进度条，默认隐藏，适配导航栏高度和主题配色
      div(id = "progress_container", 
          style = "display: inline-block; vertical-align: middle; margin-left: 15px; width: 160px;",
          div(style = "color: #fff; font-size: 12px; margin-bottom: 2px;", id = "progress_text", "处理中..."),
          div(style = "width: 100%; height: 8px; background-color: rgba(255,255,255,0.2); border-radius: 4px; overflow: hidden;",
              div(id = "progress_bar", style = "height: 100%; width: 0%; background-color: #3c8dbc; transition: width 0.3s ease;")
          )
      ) %>% hidden() # 初始状态隐藏
    )
  ),
  dashboardSidebar(),
  dashboardBody()
)

server <- function(input, output, session) {
  # 监听switch切换事件
  observeEvent(input$swtLabels, {
    # 切换时先显示进度条
    show("progress_container")
    # 步骤1：替换为你的实际业务逻辑
    Sys.sleep(5) 
    runjs("$('#progress_bar').css('width', '25%'); $('#progress_text').text('步骤1完成');")
    # 步骤2：替换为你的实际业务逻辑
    Sys.sleep(5) 
    runjs("$('#progress_bar').css('width', '50%'); $('#progress_text').text('步骤2完成');")
    # 步骤3：替换为你的实际业务逻辑
    Sys.sleep(5) 
    runjs("$('#progress_bar').css('width', '75%'); $('#progress_text').text('步骤3完成');")
    # 步骤4：替换为你的实际业务逻辑
    Sys.sleep(5) 
    runjs("$('#progress_bar').css('width', '100%'); $('#progress_text').text('处理完成');")
    # 展示完成状态0.5秒后隐藏进度条
    Sys.sleep(0.5)
    hide("progress_container")
    # 重置进度条状态，方便下次触发
    runjs("$('#progress_bar').css('width', '0%'); $('#progress_text').text('处理中...');")
  })
}

# 运行应用
shinyApp(ui = ui, server = server)

关键说明 #

• 自定义进度条样式完全适配dashboardHeader的高度和主题配色，不会出现布局溢出、样式错乱问题
• 可根据实际任务步骤数调整进度百分比和提示文字，用户能实时感知任务执行进度
• 任务完成后自动隐藏进度条，不会占用头部导航栏的可用空间
• 如果不需要文字提示，直接删掉progress_text对应的div即可，只保留进度条部分

内容的提问来源于stack exchange，提问作者KirkD-CO