Progress

Composite API

Progress.Root + Progress.Indicator — an example with a periodically changing value (simulating loading).

tsx

import { component$, useSignal, useVisibleTask$ } from "@builder.io/qwik";
import { Progress } from "~/components/ui/base/progress";

export default component$(() => {
  const v = useSignal(0);
  // eslint-disable-next-line qwik/no-use-visible-task
  useVisibleTask$(({ cleanup }) => {
    const id = window.setInterval(() => {
      v.value = v.value >= 100 ? 0 : v.value + 4;
    }, 350);
    cleanup(() => clearInterval(id));
  });
  return (
    <Progress.Root value={v.value} class="max-w-md">
      <Progress.Indicator />
    </Progress.Root>
  );
});

ProgressBar

A shortcut with the same look — internally root + indicator.

tsx

import { ProgressBar } from "~/components/ui/base/progress";

<ProgressBar value={66} class="max-w-md" />

Indeterminate state

value={null} → data-progress="indeterminate" and a shortened pulsing segment.

tsx

import { ProgressBar } from "~/components/ui/base/progress";

<ProgressBar value={null} class="max-w-md" />

Bound value

bind:value to a signal together with a Slider.

Value

tsx

import { component$, useSignal } from "@builder.io/qwik";
import { ProgressBar } from "~/components/ui/base/progress";
import { Slider } from "~/components/ui/base/slider";

export default component$(() => {
  const v = useSignal(35);
  return (
    <div class="max-w-md space-y-4">
      <ProgressBar bind:value={v} />
      <Slider
        label="Value"
        value={v.value}
        onChange$={(n) => {
          v.value = n;
        }}
      />
    </div>
  );
});

Metadata

Source: meta.generated.json (see npm run generate)

File base/progress/meta.generated.json not found or path not allowed.