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 bg-secondary', props?.class)}
    >
      <HeadlessProgress.Indicator
        class="h-full w-full flex-1 bg-primary transition-all"
        style={{ transform: `translateX(-${100 - (props.value || 0)}%)` }}
      />
    </HeadlessProgress.Root>
  );
});

Usage

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

<Progress value={30} />