Default Progress 
<Progress progress={45} />
Sizing
Small
Default
Large
Extra Large
<div class="flex flex-col gap-2">
  <div class="text-base font-medium dark:text-white">Small</div>
  <Progress progress={45} size="sm" color="dark" />
  <div class="text-base font-medium dark:text-white">Default</div>
  <Progress progress={45} size="md" color="dark" />
  <div class="text-lg font-medium dark:text-white">Large</div>
  <Progress progress={45} size="lg" color="dark" />
  <div class="text-lg font-medium dark:text-white">Extra Large</div>
  <Progress progress={45} size="xl" color="dark" />
</div>
Colors
Dark
Blue
Red
Green
Yellow
Indigo
Purple
<div class="flex flex-col gap-2">
  <div class="text-base font-medium">Dark</div>
  <Progress progress={45} color="dark" />
  <div class="text-base font-medium text-blue-700">Blue</div>
  <Progress progress={45} color="blue" />
  <div class="text-base font-medium text-red-700">Red</div>
  <Progress progress={45} color="red" />
  <div class="text-base font-medium text-green-700">Green</div>
  <Progress progress={45} color="green" />
  <div class="text-base font-medium text-yellow-700">Yellow</div>
  <Progress progress={45} color="yellow" />
  <div class="text-base font-medium text-indigo-700">Indigo</div>
  <Progress progress={45} color="indigo" />
  <div class="text-base font-medium text-purple-700">Purple</div>
  <Progress progress={45} color="purple" />
</div>
With labels inside
Flowbite
<Progress progress={50} label="Flowbite" size="lg" />
With labels outside
Flowbite 45%
<Progress progress={45} label="Flowbite" labelPosition="outside" labelProgress={true} />