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(30);
useVisibleTask$(() => {
setTimeout(() => {
progress.value = 50;
}, 500);
});
return <Progress value={progress.value} />;
});
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} />