Skip to main content
Neural UIv2.0.0Documentation
View v1 GitHub

Skeleton

Reserve space while real content is loading.

Category
Feedback and status
Import
@neural-ui/core/skeleton
Selector
neu-skeleton
import { NeuSkeletonComponent } from '@neural-ui/core/skeleton';

Usage

Skeleton is a decorative loading placeholder, not a progress meter. variant selects text, circle or rect; width and height are CSS length strings. Use equal dimensions for a circle. borderRadius overrides the variant radius when non-empty. The application owns loading state and replaces placeholders with actual content when it is ready.

Examples

Try the example and open Code to see its full implementation. Reset restores the initial demonstration state.

Examples

Loading profile…

Try and configure

Change the options and inspect the live preview. The generated template stays next to the controls; Code contains the complete executable source.

Try and configure

Live preview

Loading preview

Generated template: reflects the configuration above. Open Code for the complete imports and state.

template.html
<neu-skeleton
  variant="rect"
  width="100%"
  height="48px"
/>

Data and content

The application supplies the Inputs and owns any surrounding interaction. This component has no model bindings or Outputs. Content projection and icon templates are documented separately where supported.

Accessibility and keyboard

Skeleton is aria-hidden and has no interactive controls. Mark the containing region aria-busy while loading and supply a short status message outside that busy region. Do not expose fake text to screen readers. Reduced motion removes the shimmer while retaining the placeholder.

Key
Action
— No component-level keyboard interaction; projected buttons and links keep their own keyboard behavior.

API

All public Inputs are extracted from the pinned Core package. Named types link to their definitions. Only the actual public projection areas and templates are listed below.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Name
Type
Default
Template binding
Description
borderRadiusstring''[borderRadius]Optional CSS radius overriding the variant default.
heightstring'16px'[height]CSS height length; match width for a circle.
variant"text" | "circle" | "rect"'rect'[variant]text, circle or rect geometry.
widthstring'100%'[width]CSS width length, such as 100%, 48px or 3rem.

Templates

ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.

This component does not expose content projection or public customization templates.

Styles and tokens

Surface tokens define the shimmer and radius tokens define the shape. Choose dimensions close to the loaded content to reduce layout movement. Prefer percentages or bounded CSS lengths for responsive layouts, rather than wide fixed pixel values.

Specific tokens

This component uses shared theme tokens rather than dedicated component hooks.

Shared tokens used

Override these on a local wrapper to affect this example. An override on :root affects other components that use the same token.

Token
Purpose here
Other impact
Default / fallback
--neu-radius Control corner radius Shared by other Core consumers; scope the override. 8px
--neu-surface-2 Secondary surfaces and alternating rows Shared by other Core consumers; scope the override. #f1f5f9
--neu-surface-3 Hover and raised control surfaces Shared by other Core consumers; scope the override. #e2e8f0
--neu-radius-full Corner radius Shared by other Core consumers; scope the override. 9999px
--neu-radius-sm Corner radius Shared by other Core consumers; scope the override. 6px
--neu-space-2 Spacing between content and controls Shared by other Core consumers; scope the override. 0.5rem