github/shiny
1
1
Fork 0
mirror of https://github.com/rstudio/shiny.git synced 2026-04-29 03:00:45 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
efefe9db9b3cabb4e36d012fe14e3ff2e44437fd
shiny/reference/busyIndicatorOptions.html
cpsievert 7b151ae9eb Built site for shiny@1.11.1.9000: f752856
2025-07-08 05:05:08 +00:00

243 lines
20 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<!-- Generated by pkgdown: do not edit by hand --><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Customize busy indicator options — busyIndicatorOptions • shiny</title><!-- jquery --><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script><!-- Bootstrap --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha256-bZLfwXAP04zRMK2BjiO8iu9pf4FbLqX6zitd+tIvLhE=" crossorigin="anonymous"><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha256-nuL8/2cJ5NDSSwnKD8VqreErSWHtnEP9E7AySL+1ev4=" crossorigin="anonymous"></script><!-- bootstrap-toc --><link rel="stylesheet" href="../bootstrap-toc.css"><script src="../bootstrap-toc.js"></script><!-- Font Awesome icons --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/v4-shims.min.css" integrity="sha256-wZjR52fzng1pJHwx4aV2AO3yyTOXrcDW7jBpJtTwVxw=" crossorigin="anonymous"><!-- clipboard.js --><script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js" integrity="sha256-inc5kl9MA1hkeYUt+EC3BhlIgyp/2jDIyBLS6k3UxPI=" crossorigin="anonymous"></script><!-- headroom.js --><script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.11.0/headroom.min.js" integrity="sha256-AsUX4SJE1+yuDu5+mAVzJbuYNPHj/WroHuZ8Ir/CkE0=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.11.0/jQuery.headroom.min.js" integrity="sha256-ZX/yNShbjqsohH1k95liqY9Gd8uOiE1S4vZc+9KQ1K4=" crossorigin="anonymous"></script><!-- pkgdown --><link href="../pkgdown.css" rel="stylesheet"><script src="../pkgdown.js"></script><meta property="og:title" content="Customize busy indicator options — busyIndicatorOptions"><meta property="og:description" content="Shiny automatically includes busy indicators, which more specifically means:
Calculating/recalculating outputs have a spinner overlay.
Outputs fade out/in when recalculating.
When no outputs are calculating/recalculating, but Shiny is busy
doing something else (e.g., a download, side-effect, etc), a page-level
pulsing banner is shown.
This function allows you to customize the appearance of these busy indicators
by including the result of this function inside the app's UI. Note that,
unless spinner_selector (or fade_selector) is specified, the spinner/fade
customization applies to the parent element. If the customization should
instead apply to the entire page, set spinner_selector = 'html' and
fade_selector = 'html'."><meta property="og:image" content="/logo.png"><!-- mathjax --><script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js" integrity="sha256-nvJJv9wWKEm88qvoQl9ekL2J+k/RWIsaSScxxlsrv8k=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/config/TeX-AMS-MML_HTMLorMML.js" integrity="sha256-84DKXVJXs0/F8OTMzX4UR909+jtl4G7SPypPavF+GfA=" crossorigin="anonymous"></script><!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]--></head><body data-spy="scroll" data-target="#toc">
<div class="container template-reference-topic">
<header><div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="navbar-brand">
<a class="navbar-link" href="../index.html">shiny</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="">1.11.1.9000</span>
</span>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav"><li>
<a href="../reference/index.html">Reference</a>
</li>
<li>
<a href="../news/index.html">Changelog</a>
</li>
</ul><ul class="nav navbar-nav navbar-right"><li>
<a href="https://github.com/rstudio/shiny/" class="external-link">
<span class="fab fa-github fa-lg"></span>
</a>
</li>
</ul></div><!--/.nav-collapse -->
</div><!--/.container -->
</div><!--/.navbar -->
</header><div class="row">
<div class="col-md-9 contents">
<div class="page-header">
<h1>Customize busy indicator options</h1>
<small class="dont-index">Source: <a href="https://github.com/rstudio/shiny/blob/main/R/busy-indicators.R" class="external-link"><code>R/busy-indicators.R</code></a></small>
<div class="hidden name"><code>busyIndicatorOptions.Rd</code></div>
</div>
<div class="ref-description">
<p>Shiny automatically includes busy indicators, which more specifically means:</p><ol><li><p>Calculating/recalculating outputs have a spinner overlay.</p></li>
<li><p>Outputs fade out/in when recalculating.</p></li>
<li><p>When no outputs are calculating/recalculating, but Shiny is busy
doing something else (e.g., a download, side-effect, etc), a page-level
pulsing banner is shown.</p></li>
</ol><p>This function allows you to customize the appearance of these busy indicators
by including the result of this function inside the app's UI. Note that,
unless <code>spinner_selector</code> (or <code>fade_selector</code>) is specified, the spinner/fade
customization applies to the parent element. If the customization should
instead apply to the entire page, set <code>spinner_selector = 'html'</code> and
<code>fade_selector = 'html'</code>.</p>
</div>
<div id="ref-usage">
<div class="sourceCode"><pre class="sourceCode r"><code><span><span class="fu">busyIndicatorOptions</span><span class="op">(</span></span>
<span> <span class="va">...</span>,</span>
<span> spinner_type <span class="op">=</span> <span class="cn">NULL</span>,</span>
<span> spinner_color <span class="op">=</span> <span class="cn">NULL</span>,</span>
<span> spinner_size <span class="op">=</span> <span class="cn">NULL</span>,</span>
<span> spinner_delay <span class="op">=</span> <span class="cn">NULL</span>,</span>
<span> spinner_selector <span class="op">=</span> <span class="cn">NULL</span>,</span>
<span> fade_opacity <span class="op">=</span> <span class="cn">NULL</span>,</span>
<span> fade_selector <span class="op">=</span> <span class="cn">NULL</span>,</span>
<span> pulse_background <span class="op">=</span> <span class="cn">NULL</span>,</span>
<span> pulse_height <span class="op">=</span> <span class="cn">NULL</span>,</span>
<span> pulse_speed <span class="op">=</span> <span class="cn">NULL</span></span>
<span><span class="op">)</span></span></code></pre></div>
</div>
<div id="arguments">
<h2>Arguments</h2>
<dl><dt id="arg--">...<a class="anchor" aria-label="anchor" href="#arg--"></a></dt>
<dd><p>Currently ignored.</p></dd>
<dt id="arg-spinner-type">spinner_type<a class="anchor" aria-label="anchor" href="#arg-spinner-type"></a></dt>
<dd><p>The type of spinner. Pre-bundled types include:
'ring', 'ring2', 'ring3', 'bars', 'bars2', 'bars3', 'pulse', 'pulse2', 'pulse3', 'dots', 'dots2', 'dots3'.</p>
<p>A path to a local SVG file can also be provided. The SVG should adhere to
the following rules:</p><ul><li><p>The SVG itself should contain the animation.</p></li>
<li><p>It should avoid absolute sizes (the spinner's containing DOM element
size is set in CSS by <code>spinner_size</code>, so it should fill that container).</p></li>
<li><p>It should avoid setting absolute colors (the spinner's containing DOM element
color is set in CSS by <code>spinner_color</code>, so it should inherit that color).</p></li>
</ul></dd>
<dt id="arg-spinner-color">spinner_color<a class="anchor" aria-label="anchor" href="#arg-spinner-color"></a></dt>
<dd><p>The color of the spinner. This can be any valid CSS
color. Defaults to the app's "primary" color if Bootstrap is on the page.</p></dd>
<dt id="arg-spinner-size">spinner_size<a class="anchor" aria-label="anchor" href="#arg-spinner-size"></a></dt>
<dd><p>The size of the spinner. This can be any valid CSS size.</p></dd>
<dt id="arg-spinner-delay">spinner_delay<a class="anchor" aria-label="anchor" href="#arg-spinner-delay"></a></dt>
<dd><p>The amount of time to wait before showing the spinner.
This can be any valid CSS time and can be useful for not showing the spinner
if the computation finishes quickly.</p></dd>
<dt id="arg-spinner-selector">spinner_selector<a class="anchor" aria-label="anchor" href="#arg-spinner-selector"></a></dt>
<dd><p>A character string containing a CSS selector for
scoping the spinner customization. The default (<code>NULL</code>) will apply the
spinner customization to the parent element of the spinner.</p></dd>
<dt id="arg-fade-opacity">fade_opacity<a class="anchor" aria-label="anchor" href="#arg-fade-opacity"></a></dt>
<dd><p>The opacity (a number between 0 and 1) for recalculating
output. Set to 1 to "disable" the fade.</p></dd>
<dt id="arg-fade-selector">fade_selector<a class="anchor" aria-label="anchor" href="#arg-fade-selector"></a></dt>
<dd><p>A character string containing a CSS selector for
scoping the spinner customization. The default (<code>NULL</code>) will apply the
spinner customization to the parent element of the spinner.</p></dd>
<dt id="arg-pulse-background">pulse_background<a class="anchor" aria-label="anchor" href="#arg-pulse-background"></a></dt>
<dd><p>A CSS background definition for the pulse. The
default uses a
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient" class="external-link">linear-gradient</a>
of the theme's indigo, purple, and pink colors.</p></dd>
<dt id="arg-pulse-height">pulse_height<a class="anchor" aria-label="anchor" href="#arg-pulse-height"></a></dt>
<dd><p>The height of the pulsing banner. This can be any valid
CSS size.</p></dd>
<dt id="arg-pulse-speed">pulse_speed<a class="anchor" aria-label="anchor" href="#arg-pulse-speed"></a></dt>
<dd><p>The speed of the pulsing banner. This can be any valid CSS
time.</p></dd>
</dl></div>
<div id="see-also">
<h2>See also</h2>
<div class="dont-index"><p><code><a href="useBusyIndicators.html">useBusyIndicators()</a></code> to disable/enable busy indicators.</p></div>
</div>
<div id="ref-examples">
<h2>Examples</h2>
<div class="sourceCode"><pre class="sourceCode r"><code><span class="r-in"><span><span class="kw">if</span> <span class="op">(</span><span class="cn">FALSE</span><span class="op">)</span> <span class="op">{</span> <span class="co"># rlang::is_interactive()</span></span></span>
<span class="r-in"><span></span></span>
<span class="r-in"><span><span class="kw"><a href="https://rdrr.io/r/base/library.html" class="external-link">library</a></span><span class="op">(</span><span class="va"><a href="https://rstudio.github.io/bslib/" class="external-link">bslib</a></span><span class="op">)</span></span></span>
<span class="r-in"><span></span></span>
<span class="r-in"><span><span class="va">card_ui</span> <span class="op">&lt;-</span> <span class="kw">function</span><span class="op">(</span><span class="va">id</span>, <span class="va">spinner_type</span> <span class="op">=</span> <span class="va">id</span><span class="op">)</span> <span class="op">{</span></span></span>
<span class="r-in"><span> <span class="fu"><a href="https://rstudio.github.io/bslib/reference/card.html" class="external-link">card</a></span><span class="op">(</span></span></span>
<span class="r-in"><span> <span class="fu">busyIndicatorOptions</span><span class="op">(</span>spinner_type <span class="op">=</span> <span class="va">spinner_type</span><span class="op">)</span>,</span></span>
<span class="r-in"><span> <span class="fu"><a href="https://rstudio.github.io/bslib/reference/card_body.html" class="external-link">card_header</a></span><span class="op">(</span><span class="fu"><a href="https://rdrr.io/r/base/paste.html" class="external-link">paste</a></span><span class="op">(</span><span class="st">"Spinner:"</span>, <span class="va">spinner_type</span><span class="op">)</span><span class="op">)</span>,</span></span>
<span class="r-in"><span> <span class="fu"><a href="plotOutput.html">plotOutput</a></span><span class="op">(</span><span class="fu">shiny</span><span class="fu">::</span><span class="fu"><a href="NS.html">NS</a></span><span class="op">(</span><span class="va">id</span>, <span class="st">"plot"</span><span class="op">)</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="op">)</span></span></span>
<span class="r-in"><span><span class="op">}</span></span></span>
<span class="r-in"><span></span></span>
<span class="r-in"><span><span class="va">card_server</span> <span class="op">&lt;-</span> <span class="kw">function</span><span class="op">(</span><span class="va">id</span>, <span class="va">simulate</span> <span class="op">=</span> <span class="fu"><a href="reactive.html">reactive</a></span><span class="op">(</span><span class="op">)</span><span class="op">)</span> <span class="op">{</span></span></span>
<span class="r-in"><span> <span class="fu"><a href="moduleServer.html">moduleServer</a></span><span class="op">(</span></span></span>
<span class="r-in"><span> id <span class="op">=</span> <span class="va">id</span>,</span></span>
<span class="r-in"><span> <span class="kw">function</span><span class="op">(</span><span class="va">input</span>, <span class="va">output</span>, <span class="va">session</span><span class="op">)</span> <span class="op">{</span></span></span>
<span class="r-in"><span> <span class="va">output</span><span class="op">$</span><span class="va">plot</span> <span class="op">&lt;-</span> <span class="fu"><a href="renderPlot.html">renderPlot</a></span><span class="op">(</span><span class="op">{</span></span></span>
<span class="r-in"><span> <span class="fu"><a href="https://rdrr.io/r/base/Sys.sleep.html" class="external-link">Sys.sleep</a></span><span class="op">(</span><span class="fl">1</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="fu"><a href="https://rdrr.io/r/stats/simulate.html" class="external-link">simulate</a></span><span class="op">(</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="fu"><a href="https://rdrr.io/r/graphics/plot.default.html" class="external-link">plot</a></span><span class="op">(</span>x <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/stats/Normal.html" class="external-link">rnorm</a></span><span class="op">(</span><span class="fl">100</span><span class="op">)</span>, y <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/stats/Normal.html" class="external-link">rnorm</a></span><span class="op">(</span><span class="fl">100</span><span class="op">)</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="op">}</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="op">}</span></span></span>
<span class="r-in"><span> <span class="op">)</span></span></span>
<span class="r-in"><span><span class="op">}</span></span></span>
<span class="r-in"><span></span></span>
<span class="r-in"><span><span class="va">ui</span> <span class="op">&lt;-</span> <span class="fu"><a href="https://rstudio.github.io/bslib/reference/page_fillable.html" class="external-link">page_fillable</a></span><span class="op">(</span></span></span>
<span class="r-in"><span> <span class="fu"><a href="useBusyIndicators.html">useBusyIndicators</a></span><span class="op">(</span><span class="op">)</span>,</span></span>
<span class="r-in"><span> <span class="fu"><a href="https://rstudio.github.io/bslib/reference/input_task_button.html" class="external-link">input_task_button</a></span><span class="op">(</span><span class="st">"simulate"</span>, <span class="st">"Simulate"</span>, icon <span class="op">=</span> <span class="fu"><a href="icon.html">icon</a></span><span class="op">(</span><span class="st">"refresh"</span><span class="op">)</span><span class="op">)</span>,</span></span>
<span class="r-in"><span> <span class="fu"><a href="https://rstudio.github.io/bslib/reference/layout_columns.html" class="external-link">layout_columns</a></span><span class="op">(</span></span></span>
<span class="r-in"><span> <span class="fu">card_ui</span><span class="op">(</span><span class="st">"ring"</span><span class="op">)</span>,</span></span>
<span class="r-in"><span> <span class="fu">card_ui</span><span class="op">(</span><span class="st">"bars"</span><span class="op">)</span>,</span></span>
<span class="r-in"><span> <span class="fu">card_ui</span><span class="op">(</span><span class="st">"dots"</span><span class="op">)</span>,</span></span>
<span class="r-in"><span> <span class="fu">card_ui</span><span class="op">(</span><span class="st">"pulse"</span><span class="op">)</span>,</span></span>
<span class="r-in"><span> col_widths <span class="op">=</span> <span class="fl">6</span></span></span>
<span class="r-in"><span> <span class="op">)</span></span></span>
<span class="r-in"><span><span class="op">)</span></span></span>
<span class="r-in"><span></span></span>
<span class="r-in"><span><span class="va">server</span> <span class="op">&lt;-</span> <span class="kw">function</span><span class="op">(</span><span class="va">input</span>, <span class="va">output</span>, <span class="va">session</span><span class="op">)</span> <span class="op">{</span></span></span>
<span class="r-in"><span> <span class="va">simulate</span> <span class="op">&lt;-</span> <span class="fu"><a href="reactive.html">reactive</a></span><span class="op">(</span><span class="va">input</span><span class="op">$</span><span class="va">simulate</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="fu">card_server</span><span class="op">(</span><span class="st">"ring"</span>, <span class="va">simulate</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="fu">card_server</span><span class="op">(</span><span class="st">"bars"</span>, <span class="va">simulate</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="fu">card_server</span><span class="op">(</span><span class="st">"dots"</span>, <span class="va">simulate</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="fu">card_server</span><span class="op">(</span><span class="st">"pulse"</span>, <span class="va">simulate</span><span class="op">)</span></span></span>
<span class="r-in"><span><span class="op">}</span></span></span>
<span class="r-in"><span></span></span>
<span class="r-in"><span><span class="fu"><a href="shinyApp.html">shinyApp</a></span><span class="op">(</span><span class="va">ui</span>, <span class="va">server</span><span class="op">)</span></span></span>
<span class="r-in"><span><span class="op">}</span></span></span>
</code></pre></div>
</div>
</div>
<div class="col-md-3 hidden-xs hidden-sm" id="pkgdown-sidebar">
<nav id="toc" data-toggle="toc" class="sticky-top"><h2 data-toc-skip>Contents</h2>
</nav></div>
</div>
<footer><div class="copyright">
<p></p><p>Developed by Winston Chang, Joe Cheng, JJ Allaire, Carson Sievert, Barret Schloerke, Yihui Xie, Jeff Allen, Jonathan McPherson, Alan Dipert, Barbara Borges, Posit Software, PBC.</p>
</div>
<div class="pkgdown">
<p></p><p>Site built with <a href="https://pkgdown.r-lib.org/" class="external-link">pkgdown</a> 2.1.3.</p>
</div>
</footer></div>
</body></html>
Reference in New Issue View Git Blame Copy Permalink