Skeleton
Reserve a calm placeholder while content loads.
use blinc_cn as cn;
use blinc_layout::prelude::*;
pub fn skeleton_demo() -> Div {
div()
.class("demo-stack")
.child(
div().class("demo-row").child(cn::skeleton_circle(44.0)).child(
div()
.class("demo-skeleton-text")
.child(cn::skeleton().w(160.0).h(14.0))
.child(cn::skeleton().w(112.0).h(12.0)),
),
)
.child(cn::skeleton().w_full().h(80.0))
}
@layer components {
.cn-skeleton {
font-family: var(--font-sans);
}
.cn-skeleton {
background: var(--cn-skeleton-bg, var(--surface-elevated));
border-radius: var(--radius-sm);
animation: cn-skeleton-pulse 1500ms var(--ease-in-out) infinite;
}
.cn-skeleton--circle {
border-radius: var(--radius-full);
}
@keyframes cn-skeleton-pulse {
from {
opacity: 1;
}
50% {
opacity: 0.4;
}
to {
opacity: 1;
}
}
}
Usage and properties
Reserve a calm placeholder while content loads. Apply CSS after the component layer to restyle the documented parts.
Use the installation guide to add blinc_cn and its component stylesheet. Create the fixture bindings once, and return the demo from your UI builder. Values marked Bound accept Signal/Computed sources where the API supports them; structural options configure the component at construction.
| Property | Type | Update model | This example |
|---|---|---|---|
width / height | f32 | Construction | Placeholder dimensions |
shape | skeleton helper | Construction | Circle and text-like bars |
Keyboard and interaction
Informational content; no activation or Tab stop is required.
Customizing it
Add application CSS after the default component layer. These selectors are the restyling surface for this component:
.cn-skeleton.cn-skeleton--circle
Theme and component variables: --primary, --text-primary, --text-secondary, --surface, --border, --radius-default, --duration-fast, --ease-state.
Built-in themes
The Live theme control installs Blinc's own theme bundles, including their colours, focus rings, corner shapes and motion tokens.
pub fn theme_bundle_for(name: &str) -> blinc_theme::ThemeBundle {
match name {
"restrained" => blinc_theme::RestrainedTheme::bundle(),
"expressive" => blinc_theme::ExpressiveTheme::bundle(),
_ => blinc_theme::HybridTheme::bundle(),
}
.with_css(blinc_cn::cn_styles::CN_STYLES)
}Download the default widget and component stylesheets. Sample assets and licenses are available in the asset guide.
Documentation
From the canonical component guide.
A skeleton pulses by the cn-skeleton-pulse keyframes:
div().flex_col().gap(2.0)
.child(skeleton().w(200.0).h(20.0))
.child(skeleton_circle(48.0))
The root is .cn-skeleton; a circle also has .cn-skeleton--circle.
Override the animation through a custom class:
.my-skeleton { animation-duration: 3000ms; }
Card Skeleton
card().child(card_content().child(
div().flex_col().gap(2.0)
.child(skeleton().w(150.0).h(24.0))
.child(skeleton().w(200.0).h(16.0))
.child(skeleton().w_full().h(100.0)),
))
Platforms and version
The component API is available in Blinc 0.6.0. The Live example runs in a dedicated worker and requires a compatible GPU surface. Preview and Code remain available when Live cannot start. The canvas has a descriptive label; a full screen-reader DOM mirror is not provided. The gallery integration is based on revision e2e55c24e078.
Recordings and live demos use the default Hybrid theme with bundled Noto Sans. The recording uses a 560 × 320 logical viewport at twice that resolution. Live follows its container and actual display density. Source base revision · Exact build source · Artifact versions and checksums · Font license.