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