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 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} />