Skeleton
Skeletons are used to provide a visual representation of where content will eventually be drawn.
These are simple containers for scaffolding layouts that mimic what users will see when content has finished loading. This prevents large areas of empty space during asynchronous operations.
Skeletons try not to be opinionated, as there are endless possibilities for designing layouts. Therefore, you'll likely use more than one skeleton to create the effect you want. If you find yourself using them frequently, consider creating a template that renders them with the desired arrangement and styles.
div( cls := "skeleton-overview", div( cls := "skeleton-header", Skeleton(_.effect.sheen)(height.px(48), width.px(48)), Skeleton(_.effect.sheen)(height.px(16)) ), Skeleton(_.effect.sheen)(height.px(16)), Skeleton(_.effect.sheen)(height.px(16)), Skeleton(_.effect.sheen)(height.px(16)))Examples
Effects
There are two built-in effects, sheen and pulse. Effects are intentionally subtle, as they can be distracting when used extensively. The default is none, which displays a static, non-animated skeleton.
Skeleton(_.effect.none)(height.px(16))Skeleton(_.effect.sheen)(height.px(16))Skeleton(_.effect.pulse)(height.px(16))Paragraphs
Use multiple skeletons and some clever styles to simulate paragraphs.
div( cls := "skeleton-paragraphs", Skeleton()(height.px(16)), Skeleton()(height.px(16)), Skeleton()(height.px(16)), Skeleton()(height.px(16)))Avatars
Set a matching width and height to make a circle, square, or rounded avatar skeleton.
div( cls := "skeleton-avatars", Skeleton()(height.px(48), width.px(48)), Skeleton()(height.px(48), width.px(48)), Skeleton()(height.px(48), width.px(48)))Custom Shapes
Set a border-radius on the indicator part to make circles, squares, and rectangles. For more complex shapes, you can apply clip-path to the indicator part. Try Clippy if you need help generating custom shapes.
div( cls := "skeleton-shapes", Skeleton()(cls := "square", height.px(48), width.px(48)), Skeleton()(cls := "circle", height.px(48), width.px(48)), Skeleton()(cls := "triangle", height.px(48), width.px(48)), Skeleton()(cls := "cross", height.px(48), width.px(48)), Skeleton()(cls := "comment", height.px(48), width.px(48)))Custom Colors
Set the --color and --sheen-color custom properties to adjust the skeleton's color.
Skeleton( _.effect.sheen)( styleAttr := "--color: tomato; --sheen-color: #ffb094;", height.px(16))