Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

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

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

  useVisibleTask$(() => {
    setTimeout(() => {
      progress.value = 50;
    }, 500);
  });

  return <Progress bind:value={progress} />;
});

Installation

Run the following cli command or copy/paste the component code into your project

qwik-ui add progress

import { cn } from '@qwik-ui/utils';
import { type PropsOf, component$ } from '@builder.io/qwik';
import { Progress as HeadlessProgress } from '@qwik-ui/headless';

export const Progress = component$<PropsOf<typeof HeadlessProgress.Root>>((props) => {
  return (
    <HeadlessProgress.Root
      class={cn(
        'relative h-4 w-full overflow-hidden rounded-sm border bg-muted',
        props.class,
      )}
      {...props}
    >
      <HeadlessProgress.Indicator class="h-full w-full flex-1 bg-primary transition-all" />
    </HeadlessProgress.Root>
  );
});

Usage

import { Progress } from '~/components/ui';

<Progress value={30} />