为闪亮的应用程序添加“正在计算”指示器答案

【问题标题】：Add 'Calculation In Process' Indicator for Shiny Application为闪亮的应用程序添加“正在计算”指示器
【发布时间】：2014-05-11 11:29:24
【问题描述】：

我正在使用 shiny 来构建一个 Web 应用程序。有些步骤需要一些时间来计算，所以我想在闪亮的应用程序中添加一个计算过程指示器。

我在stackoverflow中找到了Show that Shiny is busy (or loading) when changing tab panels，但是shinyIncubator包接缝需要指定最小值和最大值。

然后我发现了这个博客：http://withr.me/blog/2014/01/03/add-calculation-in-process-indictor-for-shiny-application/他提供了一个很好的方法来做到这一点。

shinyUI(bootstrapPage(
  # Add custom CSS & Javascript;
  tagList(
    tags$head(
      tags$link(rel="stylesheet", type="text/css",href="style.css"),
      tags$script(type="text/javascript", src = "busy.js")
    )
  ),
  div(class = "busy",  
      p("Calculation in progress.."), 
      img(src="http://imageshack.us/a/img827/4092/ajaxloaderq.gif")
  ),
  div(class = "span4", uiOutput("obs")),
  div(class = "span8", plotOutput("distPlot"))
))

Java 脚本；

setInterval(function(){
  if ($('html').attr('class')=='shiny-busy') {
    setTimeout(function() {
      if ($('html').attr('class')=='shiny-busy') {
        $('div.busy').show()
      }
    }, 1000)
  } else {
    $('div.busy').hide()
  }
}, 100)

style.css

div.busy { 
  position:absolute;
  top: 40%;
  left: 50%;
  margin-top: -100px;
  margin-left: -50px;
  display:none;
  background: rgba(230, 230, 230, .8);
  text-align: center;
  padding-top: 20px;
  padding-left: 30px;
  padding-bottom: 40px;
  padding-right: 30px;
  border-radius: 5px;
}

所以我的问题是如何在我的 ui 文件中添加自定义 CSS 和 Javascript？我试图创建两个单独的 js 和 css 文件，但指示器不断出现在左上角。然后我尝试将这两段代码直接放在R中，当然，语法错误。谢谢！

问题已解决：创建一个名为“www”的文件夹并将两个文件放入其中。

【问题讨论】：

你到底想做什么？您希望进度指示器出现在页面中间吗？或者与您页面上的特定内容或其他内容对齐？（我很好奇，因为我们目前正在设计 Shiny 0.10 中的进度指示。）
我试图让进度指示器在计算时出现在页面中间，然后消失。到目前为止，我的指标一直出现在左上角（我猜是默认位置），这意味着 java 脚本和 style.css 不起作用。
将您的帖子误读为“我正在尝试构建一个闪亮的新 Web 应用程序”！
@Yoki，如果您解决了自己的问题，如果您可以发布自己的答案并接受它，以便将问题标记为已回答，将会很有帮助。

标签： javascript css r shiny

【解决方案1】：

创建一个名为“www”的文件夹并将这两个文件放入其中。

【讨论】：