Feedback

Spinner and Skeleton

Spinners for short waits; skeletons to hold the shape of loading content.

import { Spinner, Skeleton } from '@jsonresume/ui'Source(opens in a new tab)

Examples

Loading themes

spinner/loading.tsx

import { Skeleton, Spinner, Stack } from '@jsonresume/ui';
import * as styles from './loading.css';

export default function Loading() {
  return (
    <Stack direction="row" gap={8} align="center" wrap>
      <Spinner label="Loading themes" />
      <Stack gap={2} className={styles.root} aria-busy="true">
        <Skeleton height="1.25rem" width="60%" />
        <Skeleton />
        <Skeleton width="85%" />
      </Stack>
    </Stack>
  );
}

spinner/loading.css.ts

import { style } from '@vanilla-extract/css';

export const root = style({ width: '16rem' });

Accessibility

Spinner is a status region with a spoken label.
Skeletons are decorative: mark the loading region aria-busy.

Props

Also accepts the attributes of the element Spinner renders.
Prop	Type	Default	Description
label	string	Loading	Announced to assistive technology.

Also accepts the attributes of the element Skeleton renders.
Prop	Type	Default	Description
height	string	1em
width	string	100%