Skeleton
Displays a placeholder loading animation while content is being fetched.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Skeleton />
Pick an animation to see it applied live.
API Reference
Skeleton
Skeleton is a simple pulsing placeholder element. Use the Class parameter to set width, height, and border-radius.
Accessibility
A bar is aria-hidden and silent by default — like shadcn's Skeleton, it's plain
decoration, not something assistive tech should announce. That matters most for a group of
several bars (a card skeleton, a list skeleton): they used to each render their own
role="status", so a loading card was several competing live regions announcing
"Loading" one after another. Opt a single bar into announcing itself by setting
Announce="true" (uses the localized default text) or a custom
AriaLabel (setting a label is itself an opt-in — it implies you want it read).
Announce once at the container level rather than on every child bar:
SkeletonText
SkeletonCard
SkeletonCircle
SkeletonCircle renders its own placeholder div (unlike SkeletonText/SkeletonCard, which
just compose several <Skeleton> bars and inherit that component's accessibility
behavior), so it carries the identical AriaLabel/Announce contract described
above: silent and aria-hidden by default, a single localized role="status"
announcement only on opt-in.