Qwik progress-bar - Flowbite

The progress bar component is used to show the completion rate of a given task in the form of a filled bar where you can also add a label indicating percentage

Use the progress bar component from Flowbite Qwik to show the percentage and completion rate of a given task using a visually friendly bar meter based on multiple styles and sizes.

Choose one of the examples below for your application and use the Qwik props to update the progress fill rate, label, sizing, and colors and customize with the classes from Tailwind CSS.

To start using the progress bar component make sure you import it first from flowbite-qwik :

import { ProgressBar } from "flowbite-qwik"

Default progress bar

Use this example to show a progress bar where you can set the progress rate using the progress prop from Qwik which should be a number from 1 to 100.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { ProgressBar } from 'flowbite-qwik'

export default component$(() => {
  return <ProgressBar progress={45} />
})

Progress bar with labels

Use this example to show a progress bar with a label. You can set the label text using the textLabel prop and the progress text using the labelText prop.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { ProgressBar } from 'flowbite-qwik'

export default component$(() => {
  return <ProgressBar progress={50} textLabel="Flowbite" size="lg" labelProgress labelText />
})

Label positioning

This example shows how you can position the label text inside the progress bar by using the Qwik props called progressLabelPosition and textLabelPosition on the <ProgressBar> component in Qwik.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { ProgressBar } from 'flowbite-qwik'

export default component$(() => {
  return (
    <ProgressBar progress={45} progressLabelPosition="inside" textLabel="Flowbite" textLabelPosition="outside" size="lg" labelProgress labelText />
  )
})

Sizing

The size prop from Qwik can be used on the <ProgressBar> component to set the size of the progress bar. You can choose from sm, md, lg and xl.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { ProgressBar } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex flex-col gap-2">
      <div class="text-base font-medium dark:text-white">Small</div>
      <ProgressBar progress={45} size="sm" color="dark" />
      <div class="text-base font-medium dark:text-white">Default</div>
      <ProgressBar progress={45} size="md" color="dark" />
      <div class="text-lg font-medium dark:text-white">Large</div>
      <ProgressBar progress={45} size="lg" color="dark" />
      <div class="text-lg font-medium dark:text-white">Extra Large</div>
      <ProgressBar progress={45} size="xl" color="dark" />
    </div>
  )
})

Colors

Set your own custom colors for the progress bar component by using the color prop from Qwik and the utility classes from Tailwind CSS.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { ProgressBar } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex flex-col gap-2">
      <div class="text-base font-medium">Dark</div>
      <ProgressBar progress={45} color="dark" />
      <div class="text-base font-medium text-blue-700">Blue</div>
      <ProgressBar progress={45} color="blue" />
      <div class="text-base font-medium text-red-700">Red</div>
      <ProgressBar progress={45} color="red" />
      <div class="text-base font-medium text-green-700">Green</div>
      <ProgressBar progress={45} color="green" />
      <div class="text-base font-medium text-yellow-700">Yellow</div>
      <ProgressBar progress={45} color="yellow" />
      <div class="text-base font-medium text-indigo-700">Indigo</div>
      <ProgressBar progress={45} color="indigo" />
      <div class="text-base font-medium text-purple-700">Purple</div>
      <ProgressBar progress={45} color="purple" />
      <div class="text-base font-medium text-cyan-700">Cyan</div>
      <ProgressBar progress={45} color="cyan" />
      <div class="text-base font-medium text-gray-700">Gray</div>
      <ProgressBar progress={45} color="gray" />
      <div class="text-base font-medium text-lime-700">Lime</div>
      <ProgressBar progress={45} color="lime" />
      <div class="text-base font-medium text-pink-700">Pink</div>
      <ProgressBar progress={45} color="pink" />
      <div class="text-base font-medium text-teal-700">Teal</div>
      <ProgressBar progress={45} color="teal" />
    </div>
  )
})

Custom theme

Use the theme prop to customize styles of the component : root/bar/label

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { ProgressBar } from 'flowbite-qwik'

export default component$(() => {
  return <ProgressBar progress={50} textLabel="Flowbite" size="lg" labelProgress labelText theme={{ root: 'p-4', bar: 'italic rounded-none' }} />
})