Skeleton

import { AXSkeletonModule } from '@acorex/components/skeleton';

Skeleton component is a placeholder that simulates the layout of content while it is loading. It appears as gray or muted shapes (like rectangles or circles) that mimic the structure of text, images, or other elements, providing a smoother user experience by indicating that content is being loaded or processed.

Overview

In this section, you can test different options of this component and see the output in real time

Animated

Usage

A simple example of using ax-skeleton

Preview

Code

Animated

The animated property can enable animation on skeleton. default value for animatedis true

Preview

Code

Design Tokens

Design tokens are variables that define the visual style of ACoreX components. You can use them to change colors, typography, spacing, and other visual aspects.

Default component colors use system surface colors.

--ax-comp-skeleton-bg-color	var(--ax-sys-color-dark)	Background color of the skeleton. Defaults to the system's surface text color.
--ax-comp-skeleton-bg-opacity	0.2	Background opacity color of the skeleton.
--ax-comp-skeleton-line-width	14rem	Width of the animated loading line in the skeleton.