Skeleton

A skeleton holds the space of content that has not arrived yet. It fills a box with the theme muted token and sweeps a soft shimmer across it, sized to match whatever it replaces. Compose several to outline a card or a list row. The shimmer stops under reduced motion, leaving a static fill.

import 'package:fossui/fossui.dart';

const FossSkeleton(width: 200, height: 16);

Shape

The default constructor is a rounded box. Use FossSkeleton.circle for avatars and other round content.

const FossSkeleton.circle(size: 40);

Sizing

width and height are logical pixels. A null value defers to the parent constraints; pass double.infinity to fill the available width, for example a text line inside a column.

const FossSkeleton(width: double.infinity, height: 12);

Compose boxes and a circle to sketch a card row while it loads.

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    const FossSkeleton.circle(size: 48),
    const SizedBox(width: 12),
    Expanded(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: const [
          FossSkeleton(width: 170, height: 16),
          SizedBox(height: 8),
          FossSkeleton(width: double.infinity, height: 12),
          SizedBox(height: 6),
          FossSkeleton(width: 140, height: 12),
        ],
      ),
    ),
  ],
);

Accessibility

A skeleton is decorative and carries no semantics. Announce the loading state at the region level so a screen reader hears it, and let the real content speak once it loads.

API

FossSkeleton

FossSkeleton.circle

Live demo

Open the interactive gallery to try every shape and size with live knobs.