title: shiny loading bar for htmlwidgets
body: <p>In R/Shiny, I am making some quite detailed htmlwidgets to go into a shiny app through a variety of packages, and can often take a long time to render.</p>
  
  <p>I would like to create a loading bar or use a loading gif to let the user know that it is loading...and to be patient while it loads.</p>
  
  <p>Below is an example of using the <code>dygraphs</code> package that takes quite a while to load once you start including more and more data, i.e. shift the slider higher and higher...and loading times take longer and longer...</p>
  
  <p>I am unsure how to incorporate the progress indicator (<a href="http://shiny.rstudio.com/articles/progress.html" rel="nofollow noreferrer">http://shiny.rstudio.com/articles/progress.html</a>) into this...but am open to other suggestions on demonstrating the loading indicator...</p>
  
  <pre><code># load libraries
  require(dygraphs)
  require(shiny)
  require(xts)
  
  # create a simple app
  runApp(list(
    ui = bootstrapPage(
      sliderInput('n', '10 to the power x', min=2,max=7,value=2),
      dygraphOutput('plot1')
    ),
    server = function(input, output) {
      output$plot1 &lt;- renderDygraph({
        v &lt;- 10^(input$n)
        out &lt;- dygraph(xts(rnorm(v),Sys.time()+seq(v))) %&gt;% 
          dyRangeSelector()
        return(out)
      })
    }
  ))
  </code></pre>
  
  <p><strong>* EDIT *</strong></p>
  
  <p>I attempted the below based on suggestions from @Carl in his comments....but it didn't seem to work...please see the below...</p>
  
  <pre><code># load libraries
  require(dygraphs)
  require(shiny)
  require(shinydashboard)
  require(xts)
  
  # create a simple app
  ui &lt;- dashboardPage(title='Loading graphs',
                dashboardHeader(
                  title = 'Loading Graphs'
                ),
                dashboardSidebar(
                  sliderInput('n', '10 to the power x', min=2,max=7,value=2)
                ),
                dashboardBody(
                  tags$head(tags$style(type="text/css", "
               #loadmessage {
                 position: fixed;
                 top: 0px;
                 left: 0px;
                 width: 100%;
                 padding: 5px 0px 5px 0px;
                 text-align: center;
                 font-weight: bold;
                 font-size: 100%;
                 color: #000000;
                 background-color: #CCFF66;
                 z-index: 105;
               }
            ")),
                  dygraphOutput('plot1'),
                  conditionalPanel(condition="$('html').hasClass('shiny-busy')",
                                   tags$div("Loading...",id="loadmessage"))
                )
  )
  server &lt;- function(input, output) {
    output$plot1 &lt;- renderDygraph({
      v &lt;- 10^(input$n)
      out &lt;- dygraph(xts(rnorm(v),Sys.time()+seq(v))) %&gt;% 
        dyRangeSelector()
      return(out)
    })
  }
  
  shinyApp(ui=ui,server=server)
  </code></pre>
  
  <p>Neither did the following:</p>
  
  <pre><code># load libraries
  require(dygraphs)
  require(shiny)
  require(shinydashboard)
  require(xts)
  
  # create a simple app
  ui &lt;- dashboardPage(title='Loading graphs',
                dashboardHeader(
                  title = 'Loading Graphs'
                ),
                dashboardSidebar(
                  sliderInput('n', '10 to the power x', min=2,max=7,value=2)
                ),
                dashboardBody(
                  tags$head(tags$style(HTML("
  .progress-striped .bar {
    background-color: #149bdf;
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.6)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.6)), color-stop(0.75, rgba(255, 255, 255, 0.6)), color-stop(0.75, transparent), to(transparent));
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.6) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.6) 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.6) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.6) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.6) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.6) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.6) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.6) 75%, transparent 75%, transparent);
    -webkit-background-size: 40px 40px;
       -moz-background-size: 40px 40px;
         -o-background-size: 40px 40px;
            background-size: 40px 40px;
  }"))),
                  dygraphOutput('plot1')
  
                )
  )
  
  server &lt;- function(input, output) {
    output$plot1 &lt;- renderDygraph({
      v &lt;- 10^(input$n)
      withProgress(message = 'Making plot', value = 1, {
        out &lt;- dygraph(xts(rnorm(v),Sys.time()+seq(v))) %&gt;% 
          dyRangeSelector()
      })
      return(out)
    })
  }
  
  shinyApp(ui=ui,server=server)
  </code></pre>
  
  <p><strong>* EDIT2 *</strong></p>
  
  <p>could something like the solution to this question be used?</p>
  
  <p><a href="https://stackoverflow.com/questions/7505318/how-to-display-busy-image-when-actual-image-is-loading-in-client-machine">How to display busy image when actual image is loading in client machine</a></p>