Edit Profile

Dark Mode

Copy config

Copy and paste the following code into your global.css file to apply the styles.

WARNING: This component is in
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.


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


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 (
      class={cn('relative h-4 w-full overflow-hidden rounded bg-secondary', props?.class)}
        class="h-full w-full flex-1 bg-primary transition-all"
        style={{ transform: `translateX(-${100 - (props.value || 0)}%)` }}


import { Progress } from '~/components/ui';
<Progress value={30} />