Progress

A visual indicator that shows how much of a task has been completed.

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

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

  const progress = 30;

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

✨ Features

Follows the WAI-Aria design pattern

Building blocks

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

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

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

🎨 Anatomy

Component	Description
`Progress.Root`	The root container for the progress
`Progress.Indicator`	Displays the progression process

Example CSS

.progress {
  height: 1.75rem;
  width: 100%;
  overflow: hidden;
  border-radius: calc(var(--border-radius) / 2);
  border: 2px dotted hsl(var(--primary));
}

.progress-indicator {
  height: 100%;
  width: 100%;
  background-color: hsl(var(--primary));
}

API

Progress.Root

Prop	Type	Description
`value`	`number`	Current value of the progress bar.
`max`	`number`	Maximum value of the progress bar.
`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.