I'm currently developing a web application using shiny. Some of the steps in my app require time-consuming calculations, so I want to implement a calculation in process indicator within the shiny application.
During my search, I came across a helpful resource on stackoverflow titled Show that Shiny is busy (or loading) when changing tab panels. However, it seems like the shinyIncubator package requires specifying minimum and maximum values.
Fortunately, I stumbled upon a blog post at , which presented an excellent method to achieve this.
shinyUI(bootstrapPage(
# Adding 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("Calculating..."),
img(src="http://imageshack.us/a/img827/4092/ajaxloaderq.gif")
),
div(class = "span4", uiOutput("obs")),
div(class = "span8", plotOutput("distPlot"))
))
Javascript:
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;
}
My question now is, how can I incorporate custom CSS and Javascript into my ui file? I initially tried creating separate files for the JS and CSS, but encountered an issue where the indicator would always appear at the top left corner. I then attempted to directly input these codes into R, resulting in syntax errors. Any advice would be greatly appreciated!
Solution Found: Simply create a folder named "www" and place both files inside it.