bones_block: A grey block to build your own placeholder

In bones: Content-Shaped Loading Placeholders for 'shiny' Outputs

A grey block to build your own placeholder

Description

The building block of a placeholder that you make yourself. Give the blocks to withBones() as skeleton, laid out with any tags. Each block takes the colours, the corner radius and the animation of bones, so your placeholder moves and looks like the built-in shapes.

Usage

bones_block(width = "100%", height = "0.75rem", shape = c("rect", "circle"))

Arguments

width	A CSS width, or a number of pixels. "100%" fills the width.
height	A CSS height, or a number of pixels. The default is the height of one line of text in the built-in shapes.
shape	"rect" for a block with the corner radius of bones, or "circle" for a round block, such as an avatar. Give a circle the same width and height.

Details

The tags at the top level of skeleton stack with a small gap. Inside a tag of your own, you set the layout: for example display: flex for a row, or ⁠display: grid; gap: 0.5rem⁠ for a column.

Value

An htmltools::tag.

See Also

withBones() and its section "Your own placeholder".

Examples

# A line of text, 60% wide.
bones_block("60%")

# An avatar.
bones_block(48, 48, shape = "circle")

if (requireNamespace("shiny", quietly = TRUE)) {
  library(shiny)

  # A list of three people: an avatar, a name and a line of text each.
  person <- div(
    style = "display: flex; gap: 0.75rem; align-items: center;",
    bones_block(40, 40, shape = "circle"),
    div(
      style = "flex: 1; display: grid; gap: 0.4rem;",
      bones_block("40%"), bones_block("80%", "0.6rem")
    )
  )
  withBones(uiOutput("people"), skeleton = tagList(person, person, person))
}

bones documentation built on Oct. 16, 2026, 5:06 p.m.