Make a skeleton placeholder

Makes the grey placeholder on its own, with no output in it. You do not need this for a Shiny output, because withBones() makes the placeholder for you. Use this function where there is no Shiny output: for example, inside a renderUI() while you get data, or to look at a shape while you design a page.

Usage

bones_skeleton(
  type = "text",
  rows = 6L,
  cols = 4L,
  lines = 3L,
  n = 3L,
  height = NULL
)

Arguments

type

The shape: "text", "table", "plot", "cards", "value", or one of the chart or table shapes above.

rows

The number of body rows, for type = "table" and the table package shapes.

cols

The number of columns, for type = "table" and the table package shapes.

lines

The number of lines, for type = "text".

n

The number of cards or values, for type = "cards" and "value".

height

A CSS height for the placeholder, or a number of pixels. NULL gives a default for the type, the same one that withBones() uses.

Value

An htmltools::tag, with the stylesheet attached.

Details

The skeleton uses the animation and the colours from bones_defaults().

Chart shapes

A chart has a shape for each common kind: "bar", "line", "scatter", "area", "histogram", "pie", "heatmap", "map", "network", "timeline" and "wordcloud". "plot" is the same as "bar". withBones() finds the shape of a map, network, timeline or word cloud widget from its output. plotOutput() cannot say which kind it will hold, because renderPlot() decides that later, on the server. So you name the kind yourself.

Table shapes

A table from a table package has a shape that copies that package: "dt", "reactable", "gt" and "rhandsontable". withBones() finds it from the output by itself.

Examples

bones_skeleton("text", lines = 4)
#> <div class="bones-skeleton bones-skeleton-text bones-anim-wave" aria-hidden="true" style="height: 96px;">
#>   <div class="bones-bar" style="width: 100%;"></div>
#>   <div class="bones-bar" style="width: 94%;"></div>
#>   <div class="bones-bar" style="width: 98%;"></div>
#>   <div class="bones-bar" style="width: 62%;"></div>
#> </div>
bones_skeleton("table", rows = 8, cols = 5)
#> <div class="bones-skeleton bones-skeleton-table bones-anim-wave" aria-hidden="true" style="height: 306px;">
#>   <div class="bones-row">
#>     <div class="bones-bar bones-bar-strong" style="width: 100%;"></div>
#>     <div class="bones-bar bones-bar-strong" style="width: 80%;"></div>
#>     <div class="bones-bar bones-bar-strong" style="width: 92%;"></div>
#>     <div class="bones-bar bones-bar-strong" style="width: 70%;"></div>
#>     <div class="bones-bar bones-bar-strong" style="width: 100%;"></div>
#>   </div>
#>   <div class="bones-row">
#>     <div class="bones-bar" style="width: 100%;"></div>
#>     <div class="bones-bar" style="width: 80%;"></div>
#>     <div class="bones-bar" style="width: 92%;"></div>
#>     <div class="bones-bar" style="width: 70%;"></div>
#>     <div class="bones-bar" style="width: 100%;"></div>
#>   </div>
#>   <div class="bones-row">
#>     <div class="bones-bar" style="width: 100%;"></div>
#>     <div class="bones-bar" style="width: 80%;"></div>
#>     <div class="bones-bar" style="width: 92%;"></div>
#>     <div class="bones-bar" style="width: 70%;"></div>
#>     <div class="bones-bar" style="width: 100%;"></div>
#>   </div>
#>   <div class="bones-row">
#>     <div class="bones-bar" style="width: 100%;"></div>
#>     <div class="bones-bar" style="width: 80%;"></div>
#>     <div class="bones-bar" style="width: 92%;"></div>
#>     <div class="bones-bar" style="width: 70%;"></div>
#>     <div class="bones-bar" style="width: 100%;"></div>
#>   </div>
#>   <div class="bones-row">
#>     <div class="bones-bar" style="width: 100%;"></div>
#>     <div class="bones-bar" style="width: 80%;"></div>
#>     <div class="bones-bar" style="width: 92%;"></div>
#>     <div class="bones-bar" style="width: 70%;"></div>
#>     <div class="bones-bar" style="width: 100%;"></div>
#>   </div>
#>   <div class="bones-row">
#>     <div class="bones-bar" style="width: 100%;"></div>
#>     <div class="bones-bar" style="width: 80%;"></div>
#>     <div class="bones-bar" style="width: 92%;"></div>
#>     <div class="bones-bar" style="width: 70%;"></div>
#>     <div class="bones-bar" style="width: 100%;"></div>
#>   </div>
#>   <div class="bones-row">
#>     <div class="bones-bar" style="width: 100%;"></div>
#>     <div class="bones-bar" style="width: 80%;"></div>
#>     <div class="bones-bar" style="width: 92%;"></div>
#>     <div class="bones-bar" style="width: 70%;"></div>
#>     <div class="bones-bar" style="width: 100%;"></div>
#>   </div>
#>   <div class="bones-row">
#>     <div class="bones-bar" style="width: 100%;"></div>
#>     <div class="bones-bar" style="width: 80%;"></div>
#>     <div class="bones-bar" style="width: 92%;"></div>
#>     <div class="bones-bar" style="width: 70%;"></div>
#>     <div class="bones-bar" style="width: 100%;"></div>
#>   </div>
#>   <div class="bones-row">
#>     <div class="bones-bar" style="width: 100%;"></div>
#>     <div class="bones-bar" style="width: 80%;"></div>
#>     <div class="bones-bar" style="width: 92%;"></div>
#>     <div class="bones-bar" style="width: 70%;"></div>
#>     <div class="bones-bar" style="width: 100%;"></div>
#>   </div>
#> </div>
bones_skeleton("plot", height = "300px")
#> <div class="bones-skeleton bones-skeleton-plot bones-skeleton-chart bones-anim-wave" aria-hidden="true" style="height: 300px;">
#>   <div class="bones-plot-area">
#>     <div class="bones-bar bones-bar-column" style="height: 45%;"></div>
#>     <div class="bones-bar bones-bar-column" style="height: 72%;"></div>
#>     <div class="bones-bar bones-bar-column" style="height: 58%;"></div>
#>     <div class="bones-bar bones-bar-column" style="height: 88%;"></div>
#>     <div class="bones-bar bones-bar-column" style="height: 64%;"></div>
#>     <div class="bones-bar bones-bar-column" style="height: 40%;"></div>
#>     <div class="bones-bar bones-bar-column" style="height: 76%;"></div>
#>     <div class="bones-bar bones-bar-column" style="height: 52%;"></div>
#>   </div>
#>   <div class="bones-axis"></div>
#> </div>
bones_skeleton("scatter", height = "300px")
#> <div class="bones-skeleton bones-skeleton-scatter bones-skeleton-chart bones-anim-wave" aria-hidden="true" style="height: 300px;">
#>   <div class="bones-plot-area bones-plot-area-free">
#>     <div class="bones-bar bones-dot" style="left: 5%; bottom: 25.1%;"></div>
#>     <div class="bones-bar bones-dot" style="left: 9%; bottom: 17.6%;"></div>
#>     <div class="bones-bar bones-dot" style="left: 14%; bottom: 35.7%;"></div>
#>     <div class="bones-bar bones-dot" style="left: 18%; bottom: 26.2%;"></div>
#>     <div class="bones-bar bones-dot" style="left: 22%; bottom: 38.6%;"></div>
#>     <div class="bones-bar bones-dot" style="left: 27%; bottom: 25.7%;"></div>
#>     <div class="bones-bar bones-dot" style="left: 31%; bottom: 39.2%;"></div>
#>     <div class="bones-bar bones-dot" style="left: 35%; bottom: 49.7%;"></div>
#>     <div class="bones-bar bones-dot" style="left: 40%; bottom: 37.8%;"></div>
#>     <div class="bones-bar bones-dot" style="left: 44%; bottom: 51.3%;"></div>
#>     <div class="bones-bar bones-dot" style="left: 49%; bottom: 40.4%;"></div>
#>     <div class="bones-bar bones-dot" style="left: 53%; bottom: 53.9%;"></div>
#>     <div class="bones-bar bones-dot" style="left: 58%; bottom: 65%;"></div>
#>     <div class="bones-bar bones-dot" style="left: 62%; bottom: 52.4%;"></div>
#>     <div class="bones-bar bones-dot" style="left: 67%; bottom: 64.5%;"></div>
#>     <div class="bones-bar bones-dot" style="left: 71%; bottom: 52%;"></div>
#>     <div class="bones-bar bones-dot" style="left: 76%; bottom: 73.1%;"></div>
#>     <div class="bones-bar bones-dot" style="left: 80%; bottom: 65.6%;"></div>
#>     <div class="bones-bar bones-dot" style="left: 85%; bottom: 76.7%;"></div>
#>     <div class="bones-bar bones-dot" style="left: 90%; bottom: 66.8%;"></div>
#>     <div class="bones-bar bones-dot" style="left: 94%; bottom: 79.3%;"></div>
#>   </div>
#>   <div class="bones-axis"></div>
#> </div>
bones_skeleton("dt", rows = 10, cols = 5)
#> <div class="bones-skeleton bones-skeleton-dt bones-anim-wave" aria-hidden="true" style="height: 556px;">
#>   <div class="bones-dt">
#>     <div class="bones-dt-top">
#>       <div class="bones-dt-length">
#>         <div class="bones-bar" style="width: 2.5rem;"></div>
#>         <div class="bones-bar bones-dt-select"></div>
#>         <div class="bones-bar" style="width: 3rem;"></div>
#>       </div>
#>       <div class="bones-dt-search">
#>         <div class="bones-bar" style="width: 3rem;"></div>
#>         <div class="bones-dt-input"></div>
#>       </div>
#>     </div>
#>     <div class="bones-dt-table">
#>       <div class="bones-row bones-dt-row bones-dt-head">
#>         <div class="bones-bar bones-bar-strong" style="width: 100%;"></div>
#>         <div class="bones-bar bones-bar-strong" style="width: 80%;"></div>
#>         <div class="bones-bar bones-bar-strong" style="width: 92%;"></div>
#>         <div class="bones-bar bones-bar-strong" style="width: 70%;"></div>
#>         <div class="bones-bar bones-bar-strong" style="width: 100%;"></div>
#>       </div>
#>       <div class="bones-row bones-dt-row">
#>         <div class="bones-bar" style="width: 100%;"></div>
#>         <div class="bones-bar" style="width: 80%;"></div>
#>         <div class="bones-bar" style="width: 92%;"></div>
#>         <div class="bones-bar" style="width: 70%;"></div>
#>         <div class="bones-bar" style="width: 100%;"></div>
#>       </div>
#>       <div class="bones-row bones-dt-row">
#>         <div class="bones-bar" style="width: 100%;"></div>
#>         <div class="bones-bar" style="width: 80%;"></div>
#>         <div class="bones-bar" style="width: 92%;"></div>
#>         <div class="bones-bar" style="width: 70%;"></div>
#>         <div class="bones-bar" style="width: 100%;"></div>
#>       </div>
#>       <div class="bones-row bones-dt-row">
#>         <div class="bones-bar" style="width: 100%;"></div>
#>         <div class="bones-bar" style="width: 80%;"></div>
#>         <div class="bones-bar" style="width: 92%;"></div>
#>         <div class="bones-bar" style="width: 70%;"></div>
#>         <div class="bones-bar" style="width: 100%;"></div>
#>       </div>
#>       <div class="bones-row bones-dt-row">
#>         <div class="bones-bar" style="width: 100%;"></div>
#>         <div class="bones-bar" style="width: 80%;"></div>
#>         <div class="bones-bar" style="width: 92%;"></div>
#>         <div class="bones-bar" style="width: 70%;"></div>
#>         <div class="bones-bar" style="width: 100%;"></div>
#>       </div>
#>       <div class="bones-row bones-dt-row">
#>         <div class="bones-bar" style="width: 100%;"></div>
#>         <div class="bones-bar" style="width: 80%;"></div>
#>         <div class="bones-bar" style="width: 92%;"></div>
#>         <div class="bones-bar" style="width: 70%;"></div>
#>         <div class="bones-bar" style="width: 100%;"></div>
#>       </div>
#>       <div class="bones-row bones-dt-row">
#>         <div class="bones-bar" style="width: 100%;"></div>
#>         <div class="bones-bar" style="width: 80%;"></div>
#>         <div class="bones-bar" style="width: 92%;"></div>
#>         <div class="bones-bar" style="width: 70%;"></div>
#>         <div class="bones-bar" style="width: 100%;"></div>
#>       </div>
#>       <div class="bones-row bones-dt-row">
#>         <div class="bones-bar" style="width: 100%;"></div>
#>         <div class="bones-bar" style="width: 80%;"></div>
#>         <div class="bones-bar" style="width: 92%;"></div>
#>         <div class="bones-bar" style="width: 70%;"></div>
#>         <div class="bones-bar" style="width: 100%;"></div>
#>       </div>
#>       <div class="bones-row bones-dt-row">
#>         <div class="bones-bar" style="width: 100%;"></div>
#>         <div class="bones-bar" style="width: 80%;"></div>
#>         <div class="bones-bar" style="width: 92%;"></div>
#>         <div class="bones-bar" style="width: 70%;"></div>
#>         <div class="bones-bar" style="width: 100%;"></div>
#>       </div>
#>       <div class="bones-row bones-dt-row">
#>         <div class="bones-bar" style="width: 100%;"></div>
#>         <div class="bones-bar" style="width: 80%;"></div>
#>         <div class="bones-bar" style="width: 92%;"></div>
#>         <div class="bones-bar" style="width: 70%;"></div>
#>         <div class="bones-bar" style="width: 100%;"></div>
#>       </div>
#>       <div class="bones-row bones-dt-row">
#>         <div class="bones-bar" style="width: 100%;"></div>
#>         <div class="bones-bar" style="width: 80%;"></div>
#>         <div class="bones-bar" style="width: 92%;"></div>
#>         <div class="bones-bar" style="width: 70%;"></div>
#>         <div class="bones-bar" style="width: 100%;"></div>
#>       </div>
#>     </div>
#>     <div class="bones-dt-bottom">
#>       <div class="bones-bar" style="width: 30%;"></div>
#>       <div class="bones-dt-pages">
#>         <div class="bones-bar bones-dt-page"></div>
#>         <div class="bones-bar bones-dt-page"></div>
#>         <div class="bones-bar bones-dt-page"></div>
#>         <div class="bones-bar bones-dt-page"></div>
#>       </div>
#>     </div>
#>   </div>
#> </div>