# Core/Skeleton - Design

A skeleton is a graphical placeholder, reserving physical space in the page for content in cases where a service or action may be slow to resolve. A skeleton can be considered as an alternative to the progress spinner in many situations.

## Properties

### Title width

The title width can be controlled using the `titleWidth` prop.

### Paragraph

The paragraph rows and width can be controlled using the `paragraph` prop.

### Loading

The loading state can be controlled using the `loading` prop.

### Round

The paragraph and title radius can be controlled using the `round` prop.

### Active

The animation effect can be controlled using the `active` prop.

## Usage

### When to use

* When a resource needs long time to load
* When the component contains lots of information (List, Card)
* Only when loading data for the first time

### When to consider something else

* If the visual layout of the page is not known
* If you need to indicate processing (use Spinner)
* If the content can be pre-loaded without a skeleton

## Best Practices

**Do**

<p>
  Do maintain consistent skeleton coloring.
</p>

**Don't**

<p>
  Don't change the color of skeletons.
</p>

**Do**

<p>
  Do use skeleton loading by itself.
</p>

**Don't**

<p>
  Don't combine skeleton loading with other spinners, or other loading indicators.
</p>

## Accessibility

### Alternative text

The loading skeleton requires an appropriate accessible role and label.

**Landmark details:**

* **element**: `span` (root container)
* **aria-label**: `"Loading"` (when loading)
* **role**: `status` (live region)
* **aria-busy**: `true` (when loading)

<img className="w-full" src="images/guidelines/skeleton/alternative-text.png" alt="Skeleton with accessibility landmark annotation showing element, aria-label, and role" />

### Color contrast

Graphics and user interface components like skeletons are not required to meet minimum contrast.

### Motion

When `active` is true, the skeleton shows a gradient shimmer animation. The animation is automatically disabled when the user has `prefers-reduced-motion: reduce` set.