虽然这个问题很老,但我认为它仍然是相关的。我提供了另一种解决方案,它在按钮上显示活动指示器,在按钮标签旁边开始一个冗长的过程。
我们需要一个带有标签的操作按钮,span
并以某种方式识别该标签。
actionButton("btnUpdate", span("Update", id="UpdateAnimate", class=""))
我们还需要一些可以添加到按钮标签的 CSS 动画,例如:
tags$head(tags$style(type="text/css", '
.loading {
display: inline-block;
overflow: hidden;
height: 1.3em;
margin-top: -0.3em;
line-height: 1.5em;
vertical-align: text-bottom;
box-sizing: border-box;
}
.loading.dots::after {
text-rendering: geometricPrecision;
content: "⠋\\A⠙\\A⠹\\A⠸\\A⠼\\A⠴\\A⠦\\A⠧\\A⠇\\A⠏";
animation: spin10 1s steps(10) infinite;
animation-duration: 1s;
animation-timing-function: steps(10);
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
animation-name: spin10;
}
.loading::after {
display: inline-table;
white-space: pre;
text-align: left;
}
@keyframes spin10 { to { transform: translateY(-15.0em); } }
'))
现在我们可以shinyjs
用来操作span
在按钮标签后面动态添加动画的类。一旦用户按下按钮,我们就会添加动画:
observeEvent(input$btnUpdate, { # User requests update
# ...
shinyjs::addClass(id = "UpdateAnimate", class = "loading dots")
shinyjs::disable("btnUpdate")
# ...
})
操作完成后,我们可以从 span 中删除类并结束动画:
output$distPlot <- renderPlot({
# ...
Sys.sleep(1) # just for show, you probably want to remove it in a real app
# Button settings
shinyjs::enable("btnUpdate")
shinyjs::removeClass(id = "UpdateAnimate", class = "loading dots")
# ...
})
示例应用程序的完整代码可在 GitHub 上作为 gist 获得。