WARNING: This component is in

Draft

status. This means that it is still in development and may have bugs or missing features. It is not intended to be used in production. You may use it for testing purposes.

Progress

Displays a progress bar related to a task.

import { component$, useStyles$ } from '@builder.io/qwik';
import { Progress, ProgressIndicator } from '@qwik-ui/headless';
import styles from '../snippets/progress.css?inline';

export default component$(() => {
  useStyles$(styles);

  const progress = 30;

  return (
    <Progress value={progress} class="progress">
      <ProgressIndicator
        class="progress-indicator"
        style={{
          transform: `translateX(-${100 - progress}%)`,
        }}
      />
    </Progress>
  );
});

Qwik UI's Progress implementation follows the WAI-Aria design pattern, along with some additional API's that enhance the flexibility, types, and performance.

Provides context for assistive technology to read the progress of a task.

Building blocks

import { component$ } from '@builder.io/qwik';
import { Progress, ProgressIndicator } from '@qwik-ui/headless';

export default component$(() => {
  const progress = 30;

  return (
    <Progress value={progress} class="progress">
      <ProgressIndicator
        class="progress-indicator"
        style={{
          transform: `translateX(-${100 - progress}%)`,
        }}
      />
    </Progress>
  );
});

Accessibility

Adheres to the progressbar role requirements.

API

Progress

Contains all of the progress parts.

Prop	Type	Description
`class`	`string`	CSS classes to apply to the Progress.
`value`	`number`	The progress value.
`max`	`number`	The maximum progress value
`getValueLabel`	`function`	A function to get the accessible label text representing the current value in a human-readable format. If not provided, the value label will be read as the numeric value as a percentage of the max value.

Progress Indicator

Contains all of the progress parts.

Prop	Type	Description
`class`	`string`	CSS classes to apply to the Progress.
`value`	`number`	The progress value.
`max`	`number`	The maximum progress value
`getValueLabel`	`function`	A function to get the accessible label text representing the current value in a human-readable format. If not provided, the value label will be read as the numeric value as a percentage of the max value.