Feedback

Progress

Determinate progress for uploads, imports and completeness.

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

Examples

Basic

Resume completeness: 70%

progress/basic.tsx

import { Progress, Stack, Text } from '@jsonresume/ui';
import * as styles from './basic.css';

export default function ProgressBasic() {
  return (
    <Stack gap={2} className={styles.root}>
      <Text size="xs" tone="muted">
        Resume completeness: 70%
      </Text>
      <Progress label="Resume completeness" value={70} />
    </Stack>
  );
}

progress/basic.css.ts

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

export const root = style({ width: 'min(100%, 24rem)' });

Accessibility

role="progressbar" with a required label and aria-valuenow.

Props

Also accepts the attributes of the element Progress renders.
Prop	Type	Default	Description
label required	string	–	Accessible name, e.g. "Upload progress".
max	number	100
value	number	–	0 to `max`; omit for an indeterminate task.