Skeleton

Skeleton is a placeholder for a chart or text still loading: a 25% dither with a 50% band sweeping across in pixel steps. It's hidden from screen readers, so mark the region it fills with aria-busy, and it holds still under reduced motion. Like the charts, it takes your theme's ink and paper, light or dark, and needs no Tailwind.

Example

import "@/components/dithercharts/controls.css"
import { Skeleton } from "@/components/dithercharts/skeleton"

<div aria-busy={loading}>
  {loading ? (
    <>
      <Skeleton width="40%" />
      <Skeleton height={160} />
    </>
  ) : (
    <AreaChart data={data} />
  )}
</div>

Install

Controls install with DitherCharts Pro. See Installation to log in, then import controls.css once, e.g. in your root layout.

npx dithercharts add skeleton

Props

It renders a native element, so every other attribute that element takes passes through.