Skeleton — ARC UI

Components

Skeleton

content

static

<arc-skeleton>

Overview

Guidelines

When to use

Match skeleton dimensions to the actual content they replace to prevent layout shift
Combine multiple skeletons to represent a full content layout (avatar + text lines)
Use the text variant in a stack with varying widths for realistic paragraph placeholders
Use the circle variant sized to match your avatar component dimensions
Remove skeletons immediately when content loads — do not add artificial delays

When not to use

Use skeletons for actions that take under 200ms — the flash is more distracting than helpful
Stack more than 5-6 skeleton lines — it looks like a broken page rather than a loading state
Use a rect skeleton without setting width and height — it will collapse to zero size
Mix skeletons with spinners on the same screen — choose one loading pattern
Animate skeleton opacity on top of the shimmer — the dual animation is visually noisy

Features

Three shape variants: text (line), circle (avatar), and rect (block)
Smooth shimmer animation using a sweeping linear gradient at 1.8s intervals
Custom width and height properties for precise content-matching dimensions
Circle variant auto-matches height to width when height is not set
Theme-aware shimmer using --bg-elevated and --border-subtle tokens
Built-in accessibility: role="status", aria-label, and aria-busy attributes
CSS part (skeleton) for external animation or style overrides

Preview

Usage

<arc-skeleton variant="text" width="200px"></arc-skeleton>
<arc-skeleton variant="circle" width="48px"></arc-skeleton>
<arc-skeleton variant="rect" width="300px" height="120px"></arc-skeleton>

import { Skeleton } from '@arclux/arc-ui-react';

<Skeleton variant="text" width="200px"></Skeleton>
<Skeleton variant="circle" width="48px"></Skeleton>
<Skeleton variant="rect" width="300px" height="120px"></Skeleton>

<script setup>
import { Skeleton } from '@arclux/arc-ui-vue';
</script>

<template>
  <Skeleton variant="text" width="200px"></Skeleton>
  <Skeleton variant="circle" width="48px"></Skeleton>
  <Skeleton variant="rect" width="300px" height="120px"></Skeleton>
</template>

<script>
  import { Skeleton } from '@arclux/arc-ui-svelte';
</script>

<Skeleton variant="text" width="200px"></Skeleton>
<Skeleton variant="circle" width="48px"></Skeleton>
<Skeleton variant="rect" width="300px" height="120px"></Skeleton>

import { Component } from '@angular/core';
import { Skeleton } from '@arclux/arc-ui-angular';

@Component({
  imports: [Skeleton],
  template: `
    <Skeleton variant="text" width="200px"></Skeleton>
    <Skeleton variant="circle" width="48px"></Skeleton>
    <Skeleton variant="rect" width="300px" height="120px"></Skeleton>
  `,
})
export class MyComponent {}

import { Skeleton } from '@arclux/arc-ui-solid';

<Skeleton variant="text" width="200px"></Skeleton>
<Skeleton variant="circle" width="48px"></Skeleton>
<Skeleton variant="rect" width="300px" height="120px"></Skeleton>

import { Skeleton } from '@arclux/arc-ui-preact';

<Skeleton variant="text" width="200px"></Skeleton>
<Skeleton variant="circle" width="48px"></Skeleton>
<Skeleton variant="rect" width="300px" height="120px"></Skeleton>

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-skeleton — requires skeleton.css + base.css (or arc-ui.css) -->
<div class="arc-skeleton">
  <div
   class="skeleton"
   role="status"
   aria-label="Loading"
   aria-busy="true"
   ></div>
</div>

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-skeleton — self-contained, no external CSS needed -->
<div class="arc-skeleton" style="display: block">
  <div
   style="background: linear-gradient(
            90deg,
            rgb(17, 17, 22) 25%,
            rgb(24, 24, 30) 37%,
            rgb(17, 17, 22) 63%
          ); background-size: 200% 100%; animation: shimmer 1.8s ease-in-out infinite"
   role="status"
   aria-label="Loading"
   aria-busy="true"
   ></div>
</div>

API

Prop	Type	Default	Description
`variant`	`'text' \| 'circle' \| 'rect'`	`'text'`	Shape of the skeleton: text for lines, circle for avatars, rect for blocks
`width`	`string`	`''`	CSS width value (e.g. "200px", "100%")
`height`	`string`	`''`	CSS height value; circle auto-matches width when omitted
`count`	`number`	`1`	Renders multiple skeleton items stacked vertically with spacing. Useful for placeholder lists.

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

See Also

ARC UI

Arclight